适应移动设备的触屏和绘制需要在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"