Bootstrap学习笔记(未整理)

来源:转载

强调class

这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。

<p class="text-muted">...</p>

<p class="text-primary">...</p>

<p class="text-success">...</p>

<p class="text-info">...</p>

<p class="text-warning">...</p>

<p class="text-danger">...</p>

缩略语

鼠标悬停后会显示所有内容,但是要包含title属性

<abbr title="attribute">attr</abbr>

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。

<address>

<strong>Twitter, Inc.</strong><br>

795 Folsom Ave, Suite 600<br>

San Francisco, CA 94107<br>

<abbr title="Phone">P:</abbr> (123) 456-7890

</address>

内联列表

通过设置display: inline-block;并添加少量的内补,将所有元素放置于同一列。等同于float:left

<ul class="list-inline">

<li>...</li>

</ul>

 

关闭按钮

通过使用一个象征关闭的图标,可以用来让模式对话框和警告框消失。

<div id="box" style="width: 300px; height: 200px; border: 1px solid black;">

<button type="button" class="close" aria-hidden="true">&times;</button>

</div>

插入的叉叉按钮会显示在父级DIV的右上角

Carets

显示的是下拉框按钮的下拉小三角形

<span class="caret"></span>

 

导航条的几种样式

导航条的使用是建立在<ul class="nav">标签上的,nav属性是定义成为导航的基本属性,有以下几种样式

1.nav nav-justified 

这种导航条会将父级容器(ul)的宽度用LI标签平铺,假设父级是width:1000px;有5个li标签,那每个li标签自适应获得200px的宽度

2.nav nav-tabs

这是一种标签式导航条,需要在第一个li标签加上class="active"的属性

3.nav nav-pills

胶囊式导航,与上一个同样,需要在第一个li标签下加class="active"属性


分享给朋友:
------分隔线----------------------------
您可能感兴趣的文章:
随机阅读: