css布局语法是bootstrap三大核心内容的基础
优点:通过最基础、最简单的组合来实现;快速的制作出精美的页面;
class="lead"加粗,字体变大
给其他标签加上h1-h6的class,标签怎会变成相应的标题标签
list-unstyled 取出点
list-online 浮动到一行
dl-horizontal 可以让dl列表水平排列
container具有居中的效果,所以要想实现元素居中,可以给元素外面套一个class为container的div
按钮风格:
btn-default(默认)白色
btn-primary(视觉加重)深蓝
btn-success(成功)绿色
btn-info(提示信息)浅蓝
btn-warning(警告)橘黄
btn-danger(危险)红色
btn-link(看起来像链接)
disabled禁用 不可点击
active激活状态,会有阴影效果
table:
table
table-striped各行变色
table-bordered边框
table-condensed紧凑型
table-hover鼠标hover时背景色提示
form
form-control宽度设置成100%
form-group组与组间的margin值加大
input组建
<div>
<span>@</span>
<input type="text" placeholder="请输入">
</div>
输入框前面后面或者是两边加上文字或按钮,只支持文本输入框input,不能将表单组或栅格列表类直接混用
导航:堆叠式/胶囊式/自适应式/选项卡式
1 <!-- 导航 --> 2 <!-- 选项卡式导航 --> 3 <nav class="nav nav-tabs"> 4 <li class="active"><a href="#">首页</a></li> 5 <li><a href="#">详情页</a></li> 6 <li><a href="#">默认页</a></li> 7 <li><a href="#">我们</a></li> 8 <li><a href="#">购物车</a></li> 9 <li><a href="#">关于我们</a></li> 10 </nav> 11 <!-- 胶囊式导航 --> 12 <nav class="nav nav-pills"> 13 <li class="active"><a href="#">首页</a></li> 14 <li><a href="#">详情页</a></li> 15 <li><a href="#">默认页</a></li> 16 <li><a href="#">我们</a></li> 17 <li><a href="#">购物车</a></li> 18 <li><a href="#">关于我们</a></li> 19 </nav> 20 <!-- 堆叠式导航 --> 21 <nav class="nav nav-stacked"> 22 <li class="active"><a href="#">首页</a></li> 23 <li><a href="#">详情页</a></li> 24 <li><a href="#">默认页</a></li> 25 <li><a href="#">我们</a></li> 26 <li><a href="#">购物车</a></li> 27 <li><a href="#">关于我们</a></li> 28 </nav> 29 <!-- 自适应式 最常用 --> 30 <nav class="nav nav-justified nav-pills"> 31 <li class="active"><a href="#">首页</a></li> 32 <li><a href="#">详情页</a></li> 33 <li><a href="#">默认页</a></li> 34 <li><a href="#">我们</a></li> 35 <li><a href="#">购物车</a></li> 36 <li><a href="#">关于我们</a></li> 37 </nav>