- bootstrap基本模板
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta http-equiv="X-UA-Compatible" content='IE=edge'> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src='jquery-3.1.1.js'></script> <script src='bootstrap.js'></script> <link rel="stylesheet" href="bootstrap.css"> </head> <body> </body> </html>
-
- bootstrap布局
- 流体布局container-fluid
- 固定布局container
- 固定尺寸
- 1170
- 970
- 750
- auto
- 自定义{100px !important}
- 阈值
- 1200+= //lg
- 992+= //md
- 768+= //sm
- 768-= //xs
- 两种布局方式不要进行嵌套
- 栅格系统
- 分12列
- row
- col（col-lg/md/sm/xs-n）
- 栅格组合模式
- class="col-lg-4,col-md-6" //大分辨率符合col-lg-4 中等分辨率满足col-md-6；
- 其它知识
- 列偏移：col-lg/md/sm/xs-offset-n //向右偏移n个网格的距离（n<=12）,可以用于居中等操作；
- 列排序：col-lg/md/sm/xs-push/pull-n; //push:向后;pull:向前
- 区别：offset只能向后，如果有多个元素，一行排不开的情况下会跑到下一行；push会超出这一行；
- 行列之间可以互相嵌套
- 清除浮动：class="clear-fix";
- 分12列
- 响应式工具
- visible-lg/md/sm/xs-block/inline-block/; //在lg/md/sm/xs下显示；
- hidden-lg/md/sm/xs; //在lg/md/sm/xs下隐藏；
- pull-right //右浮动; affix //固定定位；
- Glyphicons
- glyphicon glyphicon-search
- 预定义样式
- btn/bg/text/alert/panel(...)-primary
- btn/bg/text/alert/panel(...)-success
- btn/bg/text/alert/panel(...)-info
- btn/bg/text/alert/panel(...)-warning
- btn/bg/text/alert/panel(...)-danger
- 这些预定义样式可以给任意的标签；
- 按钮
- btn-primary/success/info/warning/danger
- btn-default/link
- btn-lg/sm/xs;(默认大小相当于md)；
- active //显示鼠标移入之后的状态，当前项；当加了active的按钮鼠标移入后显示的是按下的状态；
- disabled //禁用状态；
- btn-block;
- 按钮组
- 容器:btn-group
- btn-group-justified;//a标签可以直接加到父级；input和button每一个子集都要加btn-group容器；
- btn-group-vertical;//单独使用不与btn-group连用
- btn-group-lg/sm/xs;
- <span class="caret"></span>;input不适合；按钮组的形式；
- dropdown/dropup; //箭头向上/向下
- 下拉菜单
- 自定义属性
- data-* ;//js触发器（css写法，还支持js的写法）
- aria-* ;//障碍人群，屏幕阅读器，描述角色的当前状态；
- role ;//障碍人群，描述当前角色；
- 简化必要
- dropdown/up;
- dropdown-toggle
- dropdown-menu
- data-toggle="drop-down"
- 其他属性
- open
- dropdown-menu-right;//在btn-block的情况下需要靠右用这种方式（加在ul上）；
- pull-right;//普通情况下靠右（加在外容器上）；
- divider; //分割线；
- avtive;disabled;
- text-center;
- 自定义属性
- 导航
- nav
- nav-tabs
- nav-pills
- 添加下拉菜单
- nav
- 导航条//依赖collapse（折叠插件）
- navbar navbar-default
- navbar-header
- navbar-toggle collapsed data-toggle="collapse" data-target="#id"
- navbar-brand
- img //<a><img alt="brand" src=""></a> //用图片代替文字；
- collapse navbar-collapse id="id"
- nav navbar-nav
- nav navbar-nav
- navbar-form
- 将表单放在navbar中；
- btn btn-default navbar-btn//对于不在form中的button元素通过navbar-btn使得button垂直居中；
- navbar-text //navbar中放置文本使用p标签；
- navbar-link //navbar中放置标准链接；
- navbar-left/navbar-right
- navbar-fixed-top //使导航条固定在顶部；
- navbar-header
- navbar navbar-default