Bootstrap框架
Bootstrap(一)
1、框架简介
Bootstrap是目前最流行的前端开发框架，由twitter的两位前员工Mark Otto和Jacob Thornton 在2010年8月创建。它包含了很多常用的css和js,jquery集合。
Bootstrap优势：
1）支持响应式开发。
2）丰富的组件。
3）界面美观大方。
2、新手入门
1）下载Bootstrap
2）html标准模版
<!DOCTYPEhtml>
<htmllang="zh-cn">
<head>
<metacharset="utf-8">
<!--用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式-->
<metahttp-equiv="X-UA-Compatible" content="IE=edge">
<!--默认情况下，ui布局和宽度和移动设备的宽度一致，缩放大小为原始大小（Mobile first）-->
<meta name="viewport"content="width=device-width, initial-scale=1">
<title>Bootstrap基础模版 </title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css"rel="stylesheet">
<!—以下两个插件适用于在ie8支持html5元素和媒体查询的，如果不用可移除-->
<!--[if lt IE 9]>
<scriptsrc="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!—jquery类库文件-->
<scriptsrc="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!—Bootstrap的js插件-->
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>
3、Bootstrap里面用到的css语法
1）属性选择器
|
选择器 |
用法 |
|
[attr=value] |
该属性有指定的确切值 |
|
[attr~=value] |
该属性值必须是多个用空格隔开的值，比如class=”title featured home”，而且这些值中的一个必须是指定的值”value” |
|
[attr|=value] |
属性的值是”value”或者以“value”开始并立即跟上一个”-”字符，也就是”value-”,譬如：lang=”zh-cn” |
|
[attr^=value] |
以…开头 |
|
[attr$=value] |
以….结束 |
|
[attr*=value] |
包含 |
2）子选择器
.table>tr>td
3）兄弟选择器
.nav>li+li{margin-left:2px;} /*导航条里面设置相连的li之间的间距*/
.article h1~p /*h1后面的p兄弟节点*/
4）常用的伪类
|
属性 |
描述 |
|
:hover |
鼠标划过的状态 |
|
:focus |
元素拥有焦点的状态 |
|
:first-child |
指定某一个元素的第一个子元素 |
|
:last-child |
指定某一个元素的最后子元素 |
|
:nth-child |
指定某个元素的一个或多个特定的子元素，可以传入数字，也可以传入even（偶数）或者odd（奇数） |
Bootstrap(二)
1、基本排版
1）bootstrap对h1~h6的重新定义
|
元素 |
字体大小 |
其他 |
|
h1 |
36px |
margin-top:20px; margin-bottom:10px; |
|
h2 |
30px |
|
|
h3 |
24px |
|
|
h4 |
18px |
margin-top:10px; margin-bottom:10px; |
|
h5 |
14px |
|
|
h6 |
12px |
2）bootstrap对body的默认设置
font-size:14px;
line-height:20px;
color:#333;
3）bootstrap在abbr元素上实现了缩略词的功能
<abbr title=”中华人民共和国”>PRC</abbr>
4）地址元素(将line-height:20px;margin-bottom:20px;)
<address>
<strong>电话</strong>
022-2323232
</address>
<address>
<strong>山姆大叔</strong>
<a href="mailto:#">dasds@163.com</a>
</address>
5）引用
<blockquote class="pull-right">
<p>不愤不启，不悱不发，举一隅不以三隅反，则吾不复也。</p>
<small>出自<cite title="论语述而">论语</cite></small>
</blockquote>
* cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
6）列表
普通列表(bootstrap在margin和行间距做了一个微调，设置了margin-bottom:10px)
<ul>
<li>…</li>
</ul>
有序列表
<ol>
<li>…</li>
</ol>
去点列表
<ulclass="list-unstyled">
<li>钟山风雨起苍黄</li>
<li>百万雄师过大江</li>
</ul>
内联列表
<ulclass="list-inline">
<li>钟山风雨起苍黄</li>
<li>百万雄师过大江</li>
</ul>
7）代码
<code><body></body></code> <!—内联代码，显示单行内联代码-->
<pre><body></body></pre> <!—多行代码，元素新生多行代码块-->
<kbd><body></body></kbd> <!—元素显示用户输入代码-->
8）表格
table的css属性
<table class="table table-striped table-bordered table-hovertable-condensed">
<tr><th>姓名</th><th>学号</th><th>性别</th><th>班级</th></tr>
<tr><td>张三</td><td>001</td><td>男</td><td>一班</td></tr>
<tr><td>张三</td><td>001</td><td>男</td><td>一班</td></tr>
<tr><td>张三</td><td>001</td><td>男</td><td>一班</td></tr>
<tr><td>张三</td><td>001</td><td>男</td><td>一班</td></tr>
<tr><td>张三</td><td>001</td><td>男</td><td>一班</td></tr>
</table>
说明：
|
属性 |
说明 |
|
table |
基础样式 |
|
table-striped |
隔行换色 |
|
table-bordered |
加表格边框 |
|
table-hover |
鼠标移动行的时候换色 |
|
table-condensed |
紧凑型表格，默认情况下table的padding是8，紧凑型的table设置的是5px |
相应式表格
<div class="table-responsive">
<tableclass="table">
…
</table>
</div>
* table在小屏幕设备上（小余768px像素）就会水平滚动哦那个，屏幕大于768px像素宽度时，水平滚动条消失。
Bootstrap(三)
1、表单
1）基础表单
Bootstrap对基础表单未做太多的定制化效果设计，默认都是使用全局设置，只是对表单内的fieldset,legend,labe标签进行了设定。
<fieldset>
<legend>用户登陆</legend>
<!—form-group样式提供了一个margin-bottom:15px的外间距-->
<divclass="form-group">
<label>用户登陆</label>
<!--.form-control显示的宽度会变成100%-->
<input type="email"class="form-control" placeholder="请输入你的用户名或email" />
</div>
<divclass="form-group">
<label>密码</label>
<input type="email"class="form-control" placeholder="请输入你的密码" />
</div>
<divclass="checkbox">
<label><inputtype="checkbox" />记住密码</label>
</div>
<input type="submit"class="btn btn-default" value="登陆"/>
</fieldset>
2）内联表单
<formclass="form-inline">
<divclass="form-group">
<label>用户登陆</label>
<input type="email"class="form-control" placeholder="请输入你的用户名或email" />
</div>
<divclass="form-group">
<label>密码</label>
<input type="email"class="form-control" placeholder="请输入你的密码" />
</div>
<divclass="checkbox">
<label><inputtype="checkbox" />记住密码</label>
</div>
<input type="submit"class="btn btn-default" value="登陆"/>
</form>
3）表单控件
Bootstrap对html5里面的input都进行了支持。
input 元素
<inputtype="text" placeholder="文本输入框"/>
checkbox和radio
<divclass="checkbox">
<label><inputtype="checkbox" value="" />是否想赚大钱？</label>
</div>
<divclass="checkbox">
<label><inputtype="checkbox" value="" />是否想赚大钱？</label>
</div>
<div class="radio">
<label><inputtype="radio" name="optionR" value="female" checked="checked" />请确保你喜欢女人？</label>
</div>
<div class="radio">
<label><inputtype="radio" name="optionR" value="male" />请确保你喜欢男人？</label>
</div>
<!--内联方式-->
<labelclass="checkbox-inline">
<input type="checkbox"value="体育" id="d1" />体育
</label>
<labelclass="checkbox-inline">
<input type="checkbox"value="音乐" id="d2" />音乐
</label>
<labelclass="radio-inline">
<input type="radio"value="男" id="d3"/>男
</label>
<labelclass="radio-inline">
<input type="radio"value="女" id="d4"/>女
</label>
控件状态
焦点状态
<inputtype="email" class="form-control" placeholder="请输入你的密码" />
禁用状态
<inputtype="text" placeholder="disable input here" disabled />
验证提示状态
Bootstrap提供了.has-warning , .has-error，.has-success三种样式用于分别表示警告（黄色）、错误（红色）、成功（绿色）语境的内容。‘
<divclass="form-group has-warning">
<labelclass="control-label" for="inputWarning">输入的长度不够</label>
<input type="text"class="form-control" id="text1" />
</div>
<div class="form-grouphas-error">
<labelclass="control-label" for="inputError">输入不符合要求</label>
<input type="text"class="form-control" id="text2" />
</div>
<div class="form-grouphas-success">
<label class="control-label"for="inputSuccess">输入文本符合要求</label>
<input type="text"class="form-control" id="text3" />
</div>
控件大小
<inputclass="input-lg form-control" type="text"placeholder="较大" />
<input class="form-control"type="text" placeholder="正常"/>
<inputclass="input-sm form-control" type="text"placeholder="较小" />
* input-lg input-sm 不仅适用于input,也适用于select和textarea元素
2、按钮
1）按钮样式
<input type="button" class="btn btn-default" value="default"/>
<input type="button" class="btn btn-primary" value="primary"/>
<input type="button" class="btn btn-success" value="success"/>
<input type="button" class="btn btn-info" value="info"/>
<input type="button" class="btn btn-warning" value="warning"/>
<input type="button" class="btn btn-danger" value="danger"/>
<inputtype="button" class="btnbtn-link" value="link"/>
3、图像
<imgclass="img-rounded" src="image/104.jpg" />
<img class="img-circle"src="image/104.jpg" />
<img class="img-thumbnail"src="image/104.jpg" />
4、辅助样式
文本样式
<pclass="text-muted">柔和灰</p>
<p class="text-primary">主要蓝</p>
<p class="text-success">成功绿</p>
<p class="text-info">信息蓝</p>
<p class="text-warning">警告黄</p>
<pclass="text-danger">危险红</p>
作者：逢场作戏
出处：http://www.cnblogs.com/ruanmou
博客园：逢场作戏博客
说明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
