bootstrap笔记（一）

适应移动设备的触屏和绘制需要在head中添加如下代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content里面写属性：

width控制宽度，initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，user-scalable=no 可以禁用其缩放与maximum-scale=1.0一起使用可是用户只能滚动屏幕

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

栅格系统:用于通过一系列的行和列的组合来创建页面布局    使用<div class="row"></div>并且一定要写到container或者container-fluid中

栅格的宽度  超小屏幕.col-xs-   小屏幕 .col-sm-   中等屏幕.col-md- 大屏幕 .col-lg-  

列偏移：使用.col-md-offset-*类可以将列向右偏移

表格：使用.table   <table class="table"></table>

            条纹状表格只需在加上table-striped即可

            带边框 table-borderd

            悬停效果table-hover

            响应式表格table-responsive

按钮样式：class="btn btn-default" 默认按钮样式

                bootstrap预定义按钮样式:btn-primary(首选项),btn-success(成功),btn-info(一般信息),btn-waring(警告),

                btn-danger(危险),btn-link(链接)

                按钮的尺寸设置btn-lg ,btn-sm,btn-xs

                改变按钮状态 active（激活）；disabled(禁用)

                按钮组 class="btn-group"

响应式图片：class="img-responsive"

                       图片形状：img-rounded,img-circle,img-thumbnail

表单：class="form-control"  使用表单的时候一定要添加label标签 如果要隐藏的话在label中添加class="sr-only"

        内联表单：为form添加class="form-inline" 可使其左对齐并且表现问inline-block级别的控件

        水平排列的表单：为表单添加form-horizontal类，可以将label标签和控件组水平并排布局

        复选框：显示在多行class="checkbox" 显示在一行class="checkbox-inline" class中添加disabled会出现禁用的效果

校验状态：class中添加has-waring、has-error、has-success到这些控件的父元素即可  任何包含在此元素之内的control-label

form-control和help-block都将接受这些校验状态的样式

导航组件：依赖于nav类

                    胶囊式的标签页--横向nav-pills 垂直方向nav-stacked

                    给导航添加下拉菜单class="dropdown"超链接中的class="dropdown-toggle" date-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"