bootstrap
boo’tstrap是个可以偷懒的网站，里面可以下载一个boo’tstrap压缩包，里面都是可以直接拿来用的样式，里面内容丰富，有动画，有字体图标，有响应式布局…。里面的css样式几乎都可以共用，甚至有些布局直接引用类名就直接做好了。这样减少了编写代码的压力，减少了代码量，更好的防止样式重复，增加了代码公用性。
如何引用
先在浏览器的搜索框搜索bootstrap
点击进入主页面
点击蓝色的那个bootstrap3中文文档(v3.3.7)进行压缩包下载
解压缩后放在需要的项目里面。
一般的css样式直接用link引入就好了而js文件要在script标签中添加src引入
注意：如果要引入jq文件要把jq的文件放在js文件的上面，因为bootstrap的js文件依赖jq所以应该先导入jq再导入bootstrap.js
使用的时候用class类名的方式引用
css3全局样式
栅格化系统（媒体查询）
媒体查询就是浏览器窗口缩小的时候或者需要兼容移动端和PC端的时候排版布局发生变化
栅格的内容
-
将父元素的内容的宽度等分为12份
-
通过
col-xs-1~12(浏览器视窗小于768px时触发这个排版样式)
col-sm-1~12（浏览器视窗大于等于768px时触发的排版样式）
col-md-1~12(浏览器视窗大于等于992px时触发的排版样式)
col-lg-1~12(浏览器视窗大于等于1200px时触发的排版样式)
-
当使用这种方式排版时block会变为inline-block当空间容不下最后一个列时会换行
列偏移
- 使用
.col-md-offset-1~12可以将列向右排列，实际上是用左外边距完成的 - 通过使用
.col-md-push-1~12可以给元素排序，实际上是用定位的方式完成的
排版
标题
标题内可以给<small>标签或赋予类名.small用来标记副标题
例：
<h1>h1. Bootstrap heading
<small>Secondary text</small>
</h1>
排版就是一些文本标签不怎么需要引用。直接使用语义标签即可。
表格
-
给
table添加类名.table会直接让表格的宽度变为100%并添加行线
-
给
table添加类名table-striped可以给tbody之内的每一行添加斑马条纹样式
条纹状表格是依赖
：nth-childcss选择器实现的，而这一功能不被IE8支持 -
给
table标签添加table-bordered为表格和表格里的每个单元格添加边框
-
通过给
table标签添加table-hover可以让tbody的每一行对鼠标悬停状态做出响应 -
通过给table添加
table-condensed类可以让表格更加紧凑，单元格中的内补(padding)均会减半 -
通过这些状态类可以为行或单元格设置颜色。
active(鼠标悬停时的颜色灰色)
success(成功色青绿色)
info(提示色蓝色)
warning(警告色黄色)
danger(危险色红色)
表单
单独的表单控件会被赋予一些默认样式。所有设置类名为.form-control的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。
<form action="" method="" class="form">
<!--
form-group 表单组
form-control 表单控件
form-xxx 表示表单样式
-->
<label for="" class="control-label col-sm-3">登录</label>
<div class="col-sm-9">
<input class="form-control" type="" name="" id="" value="" class="form-control"/>
</div>
<button type="button" class="btn btn-danger form-control">提交</button>
<div class="input-group">
<div class="input-group-addon">
+
</div>
<input type="text" class="form-control" name="" id="" value="" />
<div class="input-group-addon">
-
</div>
</div>
</form>
不要将表单组和输入框组混合使用
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
内联表单
为form元素添加form-inline可使其内容左对齐并且表现为inline-block级别的控件只试用于视口768宽度时(试图宽度再小就会使表单折叠)。
可能需要手动设置宽度
在Bootstrap中，输入框和单选/多选框控件默认被设置为width:100;宽度。在内联表单，我们将这些元素的宽度设置为width:auto;,因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。
一定要添加
label标签
如果你没有为每个输入控件设置label标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label设置.sr-only将其隐藏。还有一些辅助技术提供label标签的替代方案，比如aria-label、aria-labelledby或title属性。如果这些都不存在，屏幕阅读器可能会采取使用placeholder属性，如果存在的话，使用占位符来代替其他的标记，但要注意，这种方法是不妥当的。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
水平排列的表单
通过为表单添加.form-horizontal,并联合使用Bootstrap预置的栅格类，可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行，因此就无需添加.row了。
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
多选框和单选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
不带label文本的Checkbox 和 radio
如果需要 <label> 内没有文字，输入框（input）正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。 请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label）。
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>
下拉菜单
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery.js">
</script>
<!-- 因为bootstrap的js文件依赖jq所以应该先导入jq再导入boostrap.js -->
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.js">
</script>
<!--
下拉菜单
1:外边容器 必须 .dropdown
2:控制下拉项显示隐藏元素 必须有data-toggle="dropdown"
3:下拉列表 容器 .dropdown-menu
-->
<div class="dropdown"><!-- 下拉菜单 -->
<!--
data-toggle="dropdown"实现下拉菜单js操作的关键
-->
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="glyphicon glyphicon-leaf"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
按钮
<button class="btn btn-success btn-sm me">success</button>
<button class="btn btn-info you">info</button>
<button type="button" class="btn btn-lg">lg特大按钮</button>
<button class="btn btn-danger btn-xs">danger</button>
<button type="button" class="btn btn-xs">xs超小按钮</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-default">default</button>
<button class="btn active">active激活状态</button>
<button type="button" class="btn btn-danger disabled">禁止使用</button>
<button type="button" class="btn btn-default btn-link">链接</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-block">block</button>
<button type="button" class="btn btn-group">group</button>
<!--
相同点
1：有基础类名，基础类名一般清空默认样式
2：通过btn-XXX区分状态或者大小等效果
-->
<!-- <img src="image/starry_sky.jpg" class="img-circle" >
<img src="image/starry_sky.jpg" class="img-rounded" >
<img src="image/starry_sky.jpg" class="img-thumbnail" > -->
<p class="text-info">富强民主文明和谐</p>
<p class="text-warning">自由平等公正法治</p>
<p class="text-center">爱国敬业诚信友善</p>
<p class="bg-danger">chinese</p>
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<span class="caret"></span>
<div class="pull-left">
...
</div>
<div class="pull-right">
...
</div>
<div class="center-block">
center-block居中
</div>
扫一扫
1028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
