您当前的位置: 首页 > 

Charge8

暂无认证

  • 4浏览

    0关注

    447博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

Bootstrap 文本排版与表格

Charge8 发布时间:2019-01-28 15:23:57 ,浏览量:4

 

具体参考官方文档:https://v3.bootcss.com/css/

一、标题

        HTML 中的所有标题标签, 到 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。 

bootstrap 基本模本text副标题

    

二、页面主体

         Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外,

(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

    1、内联文本元素:

         被删除的文本,带下划线的文本,小号文本,斜体等参考官方文档

    2、对齐

         通过文本对齐类,可以简单方便的将文字重新对齐。

        

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

   

    3、改变文本的大小写

        

Lowercased text.

Uppercased text.

Capitalized text.

    

三、表格

为任意 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。

    1、基本设置

         斑马条纹样式: 标签添加 .table-striped 类可以给 之内的每一行

         带边框样式:添加 .table-bordered 类为表格和其中的每个单元格增加边框。

         鼠标悬停样式:添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。

         紧缩表格:添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

    
bootstrap 表格 用户名 性别 年龄 张三 男 18 李斯 男 28 小白 女 17

   

    2、状态类

         通过这些状态类可以为行或单元格设置颜色。

Class描述.active鼠标悬停在行或单元格上时所设置的颜色.success标识成功或积极的动作.info标识普通的提示信息或动作.warning标识警告或需要用户注意.danger标识危险或潜在的带来负面影响的动作
               
                    张三
                    男
                    18
                
                
                    李斯
                    男
                    28
                

3、响应式表格

     将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格。

...

   区别:当表格有固定宽度的时候:

         有table-responsive,表格有滚动条

         没有table-responsive,网页有滚动条

 

 

关注
打赏
1664721914
查看更多评论
立即登录/注册

微信扫码登录

0.0366s