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"属性