Bootstrap

###简介


Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的


是一个基于HTML、CSS、JavaScript 的开源框架。

该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。


###特点


跨设备、跨浏览器
响应式布局
提供的全面的组件
内置 jQuery 插件
支持 HTML5、CSS3 HTML5 语义化标签和 CSS3 
支持 LESS 动态样式




###国内文档翻译官网：http://www.bootcss.com


下载完毕后 主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。




###环境搭建 


解压下载的BootStrap文件  复制三大核心目录到项目的webContent中


在代码中引入如下三个文件: 
1. bootStrap核心样式表
<link rel="stylesheet" href="css/bootstrap.min.css"> 
2. Jquery框架文件 ,这个文件没有在bootStrap文件夹中, 需要添加前几天使用的文件
<script src="js/jquery.min.js"></script> 
3. 核心的BootStrap脚本文件
<script src="js/bootstrap.min.js"></script>




###Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。


Bootstrap 将全局 font-size 设置为 14px，
line-height 行高设置为 1.428(即20px)；
<p>段落元素被设置等于 1/2 行高(即 10px)；
颜色被设置为#333。






#####标题


Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构
(字体颜色、字体样式、行高均被固定,保证了统一性)
并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现标题的功能。

//从 h1 到 h6

<h1>Java-Bootstrap 框架教程<small>副标题</small></h1> //36px

<h2>Java-Bootstrap 框架教程</h2> //30px

<h3>Java-Bootstrap 框架教程</h3> //24px

<h4>Java-Bootstrap 框架教程</h4> //18px

<h5>Java-Bootstrap 框架教程</h5> //14px

<h6>Java-Bootstrap 框架教程</h6> //12px




#####页面排版-内联文本元素





<mark>元素或.mark 类//添加标记

<p>兄弟连Java-Bootstrap <mark>框架教程</mark></p>

//各种加线条的文本

<del>Java-Bootstrap 框架教程</del> //删除的文本

<s>Java-Bootstrap 框架教程</s> //无用的文本

<ins>Java-Bootstrap 框架教程</ins> //插入的文本

<u>Java-Bootstrap 框架教程</u> //效果同上，下划线文本

//各种强调的文本

<small>Java-Bootstrap 框架教程</small> //标准字号的 85%

<strong>Java-Bootstrap 框架教程</strong> //加粗 700

<em>Java-Bootstrap 框架教程</em> //倾斜


#####设置文本对齐


<p class="text-left">Java-Bootstrap 框架教程</p> //居左

<p class="text-center">Java-Bootstrap 框架教程</p> //居中

<p class="text-right">Java-Bootstrap 框架教程</p> //居右

<p class="text-justify">Java-Bootstrap 框架教程</p> //两端对齐兼容差

<p class="text-nowrap">Java-Bootstrap 框架教程</p> //不换行




#####列表排版


1. 取消默认样式: 


<ul class="list-unstyled">
 <li>Java-Bootstrap 框架教程</li> 
 <li>Java-Bootstrap 框架教程</li>
 <li>Java-Bootstrap 框架教程</li> 
 <li>Java-Bootstrap 框架教程</li> 
 <li>Java-Bootstrap 框架教程</li>
</ul>


2. 横向排列的内联li


<ul class="list-inline"> 
<li>Java-Bootstrap 框架教程</li> 
<li>Java-Bootstrap 框架教程</li> 
<li>Java-Bootstrap 框架教程</li> 
<li>Java-Bootstrap 框架教程</li> 
<li>Java-Bootstrap 框架教程</li>
</ul>




#####添加代码块


//内联代码
<code>&lt;section&gt;</code>
//用户输入
press <kbd>ctrl + ,</kbd>
//代码块
<pre>&lt;p&gt;public static void toString...&lt;/p&gt;</pre>
Bootstrap 还列举了<var>表示标记变量，<samp>表示程序输出，只不过没有重新复写 CSS。




###前景后景色


文本前景色:


样式名 描述
text-muted 柔和灰
text-primary 主要蓝
text-success 成功绿
text-info 信息蓝
text-warning 警告黄
text-danger 危险红 


背景色:


样式名 描述
bg-primary 主要蓝
bg-success 成功绿
bg-info 信息蓝
bg-warning 警告黄
bg-danger 危险红




###表格样式


基本表格样式
实现基本的表格样式: <table class="table">
条纹状表格
让<tbody>里的行产生一行隔一行加单色背景效果
<table class="table table-striped">
带边框表格
给表格增加边框
<table class="table table-bordered">
悬停鼠标
让<tbody>下的表格悬停鼠标实现背景效果
<table class="table table-hover">



#####tr单独指定状态


样式 效果
active 鼠标悬停在行或单元格上
success 标识成功或积极的动作
info 标识普通的提示信息或动作
warning 标识警告或需要用户注意
danger 表示危险或潜在的带来负面影响的动作
sr-only 隐藏当前行




###按钮样式


操作按钮, 我们一般使用三个标签来实现


1. 超链接 
2. button 按钮
3. input type=button
#####预定义按钮样式

样式 效果
btn-default 默认样式
btn-success 成功样式
btn-info 一般信息样式
btn-warning 警告样式
btn-danger 危险样式
btn-primary 首选项样式
btn-link 链接样式

使用案例:


<a  class="btn btn-danger" href="#">危险样式</a>


#####按钮尺寸样式


样式 效果
btn-lg 大按钮
btn-sm 小按钮
btn-xs 小小按钮
btn-block 块级按钮 占一行


使用案例:

<a  class="btn btn-danger btn-sm" href="#">危险样式-小</a>


#####按钮激活与禁用样式


样式 效果
active 按钮为点击后样式
disabled 禁止点击, 无法触发点击事件




##表单样式


更改表单中组件显示的效果 , 只有正确设置了输入框的 type 类型，才能被赋予正确的样式。




#####独占样式

在进行form表单元素的编写时, 
只需要给组件指定class=form-control即可实现独占样式, 独占样式会随着窗口大小改变而发生改变


这里的组件 不只是input , select 也可以


案例:


<form action="#">
帐号:<input type="text" class="form-control" placeholder="请输入帐号">
</form>
#####内联样式
只需要给form元素指定class=form-inline即可实现


案例:
<form action="#" class="form-inline">
<label>帐号:</label><input type="text" class="form-control" placeholder="请输入帐号">
</form>
#####组合输入框样式


组合输入框, 用于将一组元素组合为一个外观更优美的输入框, 可以添加前置和后置部分

步骤
1. 给form表单元素, 添加from-group样式
2. 使用div将要组合为输入框的多个元素分组 , 并指定此div样式为input-group
3. 在div中的前置后置的元素上添加样式为input-group-addon

两个组合输入框案例:


<form action="#" class="form-inline form-group">
<div class="input-group">
<div class="input-group-addon">帐号:</div>
<input type="text" class="form-control" placeholder="请输入帐号">
</div>
<br><br>
<div class="input-group">
<div class="input-group-addon">邮箱:</div>
<input type="text" class="form-control" placeholder="请输入帐号">
<div class="input-group-addon">
<select style="background-color:transparent;border:0">
<option>@163.com</option>
<option>@qq.com</option>
<option>@126.com</option>
<option>@itdage.cn</option>
</select>
</div>
</div>
<br><br>

</form>






#####校验状态


BootStrap提供了一些对于输入框的状态校验样式 . 
我们一般使用它给用户提示输入是否正确 !


在使用时,  样式是添加在输入框的外层div上的, 所以我们需要给每个输入框单独放到一个div中 .


样式 效果
has-error 错误状态
has-success 成功状态
has-warning 警告状态

一般我们使用Jquery对象的addClass方式来添加
(因为用户未输入时 , 我们一般不会更改校验状态)




##
我们有时在进行输入框状态校验的时候 , 需要连同它的前置标签文本一起改变, 则需要给这个标签添加样式为:control-label

##


案例:
<form action="#" class="form-inline">
<div class="has-error">
<label class="control-label">帐号:</label><input type="text" class="form-control" placeholder="请输入帐号">
</div><br>
<div class="has-success">
<label class="control-label">帐号:</label><input type="text" class="form-control" placeholder="请输入帐号">
</div><br>
<div class="has-warning">
<label class="control-label">帐号:</label><input type="text" class="form-control" placeholder="请输入帐号">
</div>
</form>
#####输入框尺寸

我们通过给输入框添加样式 来实现尺寸的控制


尺寸样式 效果


input-lg 大输入框
input-sm 小输入框


当存在分组情况时, 为了顾虑前后元素对齐的情况, 我们也可以设置父元素 form-group-lg、form-group-sm，来调整输入框大小




###栅格系统


Bootstrap 的栅格系统，提供了一套响应式、移动设备优先的流式栅格系统。
栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。




案例:


当宽度大于1200 一行显示6个
当宽度大于992小于1200 一行显示4个
当宽度大于768小于992 一行显示3个
当宽度小于768 一行显示2个


<div class="container">
<!-- 添加一行, 这一行数据 被分为了12等份 -->
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 text-center bg">
1
</div>
</div>
</div>


#####栅格列偏移


有时我们可以设置列偏移，让中间保持空隙col-md-offset-偏移量


#####栅格嵌套
每一列中也可以嵌套一层列  , 内部列也是按照12等份排列


#####栅格列移动 -可覆盖
可以把两个列交换位置，
col-md-pull-6向左移动6，
col-md-push-6向右移动6



###响应式类: 


超小屏幕<768px 小屏幕≥768px 中等屏幕≥992px 大屏幕≥1200px
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏


*的取值有三种: block、inline-block、inline


##


案例: 当窗口大于768显示图片 , 否则显示文字


看雪: 
<div>
<div class="hidden-xs"><img src="images/timg.jpg" style="width:500px"></div>
<div  class="visible-xs-block">雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪雪</div>
</div>


#####响应式工具类练习, 


实现注册页面


当屏幕小于768时, 仅显示输入框以及输入框中的提示文本(显示一个输入框元素)


当屏幕大于768时, 显示输入框的前置提示文本 以及 输入框本身(显示一个标签和一个输入框元素)


实现代码:


<div>
<div class="hidden-xs">
<label>帐号:</label>
<input type="text" class="form-control" placeholder="请输入帐号">
</div>
<div  class="visible-xs-block">
<input type="text" class="form-control" placeholder="请输入帐号">
</div>
</div>




###小图标组件


Bootstrap 提供了免费的 250多个小图标
参考中文官网：http://v3.bootcss.com/components/#glyphicons


使用span元素 ,添加对应的class即可实现