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