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 class=”input-group”>
<span class=”input-group-addon”>@</span>
<input type=”text” class=”form-control” 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>
-
- 可用图标Glyphicons字体图标
- 备注：需要将fonts的文件夹引入进去，放入的位置要和css js 同级放置
- 下拉菜单
- 定义dropdown 或者dropup样式的大容器。dropdown-menu是放在菜单li的容器。open可以控制菜单展开与否
- 按钮组 btn-group
- 按钮组配合下拉菜单一起使用时，要将div最外层的dropdown改成btn-group
- 垂直分组按钮：将btn-group改成btn-group-vertical
- 分离式菜单dropdown-toggle可以将直角变成圆角，
-
1 <!-- 分离式菜单 --> 2 <div class="btn-group"> 3 <button class="btn btn-info">下拉菜单1</button> 4 <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"> 5 <span class="caret"></span> 6 </button> 7 <ul class="dropdown-menu"> 8 <li> 9 <a href="#"><span class="glyphicon glyphicon-star"></span>klsdjfk</a> 10 </li> 11 <li> 12 <a href="#"><span class="glyphicon glyphicon-film"></span>klsdjfk</a> 13 </li> 14 <li> 15 <a href="#"><span class="glyphicon glyphicon-envelope"></span>klsdjfk</a> 16 </li> 17 <li> 18 <a href="#"><span class="glyphicon glyphicon-search"></span>klsdjfk</a> 19 </li> 20 </ul> 21 </div>
-
- btn-group-justified：可以实现按钮自适应，不过这个类只能使用于a标签，如果想要适配button，就必须在button外面加一层div 且div类名为btn-group
- 按钮组尺寸：btn-group-xs/btn-group-sm/btn-group-lg
-
<!– 按钮组 –>
-
1 <!-- 按钮组 --> 2 <div class="btn-toolbar"> 3 <div class="btn-group btn-group-lg"> 4 <div class="btn-group btn-group-lg"> 5 <button class="btn btn-primary" data-toggle="dropdown">left 6 <span class="caret"></span> caret可以出现下拉的三角 7 </button> 8 <ul class="dropdown-menu"> 9 <li> 10 <a href="#"><span class="glyphicon glyphicon-star"></span>klsdjfk</a> 11 </li> 12 <li> 13 <a href="#"><span class="glyphicon glyphicon-film"></span>klsdjfk</a> 14 </li> 15 <li> 16 <a href="#"><span class="glyphicon glyphicon-envelope"></span>klsdjfk</a> 17 </li> 18 <li> 19 <a href="#"><span class="glyphicon glyphicon-search"></span>klsdjfk</a> 20 </li> 21 </ul> 22 </div> 23 <button class="btn btn-success">center</button> 24 <buttn class="btn btn-warning">right</buttn> 25 </div> 26 <div class="btn-group btn-group-sm"> 27 <button class="btn btn-primary">left</button> 28 <button class="btn btn-success">center</button> 29 <buttn class="btn btn-warning">right</buttn> 30 </div> 31 <div class="btn-group btn-group-xs"> 32 <button class="btn btn-primary">left</button> 33 <button class="btn btn-success">center</button> 34 <buttn class="btn btn-warning">right</buttn> 35 </div> 36 </div>
-
版权声明：本文为barbie7原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。