bootStrap常用样式

1.标题
bootstrap对h1~h6的标题效果进行覆盖,显示出来的效果会变淡。
同时提供了对应的类名,为非标题元素设置样式.h1~ . h6同样可以达到标题的效果

如:

<div class=".h1">666</div>

副标题small标签或. small类名

2.段落
通过. lead类名来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。

<small>:小号字
<b><strong>:加粗<i><em>:斜体


3.强调
.text-muted:提示,使用浅蓝色(#999)

.text-primary:主要,便用蓝色(#428bca)

.text-success:成功,使用浅绿色(#3c763d)

.text-info:通知信息,使用浅蓝色(#31708f)

.text-warning:警告,使用黄色(#8a6d3b)

.text-danger:危险,使用褐色(#a94442)

给标签添加对应的类名,文本显示相应的颜色

4.对齐效果

在原生css中,我们用text-align设置对齐方式。

为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格: .text-left:左对齐.text-center:居中对齐.text-right:右对齐.text-justify:两端对齐。
 

5.列表

5.1去点列表

通过给列表(ul\ol)添加类名,如class="list-unstyled",就可以将列表前面的点或序号去掉。

5.2内联列表

通过给列表(ul\ol)添加类名,如class="list-inline",就可以将垂直显示转换成水平显示,即水平排列每一个li标签,而且会去掉项目符号,大多用于制作水平导航栏。

5.3定义列表

通过给列表(dl)添加类名,如class="list-horizontal",制作水平样式列表,当li标签中的长度超过160px时,会显示为...。

6.代码效果

在网页中我们想要将文本中的代码部分凸显出来,一般设置为高亮,如我们的博客中添加的代码片段就是这种效果,bootstrap为我们提供了这样的标签<code></code>、<pre></pre>

6.1单行代码<code></code>

适用于一行代码的情况,

<code>this is code</code>

在浏览器运行的效果:

我们写成这样:

<code>
this is code
this is code
</code>

也是默认显示到一行上 

6.2多行代码<pre></pre>

在编辑器用<pre></pre>,里面的空格换行浏览器会自动保存

演示:

  <pre>
        this is code1
        this is code2
        this is code3
    </pre>

效果: 

 

6.3快捷键效果

<kbd></kbd>包裹的文本会展示出特殊的效果

代码:

<span>按<kbd>ctrl</kbd>+<kbd>s</kbd>保存</span>

效果:

 

7.表格

7.1表格样式

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格:


基础样式
1 .table:基础表格

附加样式
1 .table-striped:斑马线表格

2 .table-bordered:带边框的表格

3 .table-hover:鼠标悬停高亮的表格

4. table-condensed:紧凑型表格,单元格没内距或者内距较其他表格的内距小

7.2tr、td、th样式

提供了五种不同的类名,每种类名控制了行的不同背景颜色

.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作
 

我们分别应用一下:给每个td加上不同的类名

 <table class="table table-bordered" style="width: 400px; height: 50px;"> <!-- 带边框 -->
        <tr >
            <td class="success">111</td>
            <td class="info">222</td>
            <td class="danger">333</td>
        </tr>
        <tr >
            <td class="active">444</td>
            <td class="warning">555</td>
            <td>666</td>
        </tr>
    </table>

效果:

 注意:我们想要使用.active  .success  .info  .warning  .danger这五个样式,就必须在table标签加上.table类型,告知为基础表格,这些效果才能够生效

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值