bootstrap框架--css布局

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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgjxys.html