bootstrap框架的搭建

bootstrap框架

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。使用bootstrap框架时，切记不能改变class的组名，如果需要建组设置属性，就再增加一个class组，下面的Bootstrp只是一些比较常用的属性，如果需要用到其他的属性，就到http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html网站调用。

1.Bootstrap 的网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。移动设备上优先是指1.在内容上决定什么事最重要的；2.在布局上，优先设计更小的宽度，基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑；3.逐渐增强，随着屏幕大小的增加而添加元素；4.响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，这12列相邻的列也可以合并。

2.Bootstrap 排版

a.标题    Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。例如h1： <h1>标题 <small>副标题1</small></h1>，副标题颜色和大小不如正标题明显。

b.引导主题副本    为了给段落添加强调文本，则可以添加 <p class="lead"></p>，这将得到更大更粗、行高更高的文本。

c.强调    <strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。<strong>增强语气的文本</strong>。

3. Bootstrap按钮

常用的按钮有下列按钮：

<!-- 标准的按钮 --> <button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 --> <button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 --> <button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 --> <button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 --> <button type="button" class="btn btn-link">链接按钮</button>

按钮的大小控制：

.btn-lg   这会让按钮看起来比较大。

.btn-sm   这会让按钮看起来比较小。

.btn-xs   这会让按钮看起来特别小。

.btn-block    这会创建块级的按钮，会横跨父元素的全部宽度。

按钮禁用：disabled  当禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。<button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>

4.Bootstrap图片

.img-rounded  为图片添加圆角

.img-circle  将图片变为圆形

.img-thumbnail  缩略图功能

.img-responsive  图片响应式

5.Bootstrap响应式实用工具

超小屏幕                 小屏幕                    中等屏幕                 大屏幕
                          手机 (<768px)        平板 (≥768px)        桌面 (≥992px)        桌面 (≥1200px)
                                                             
 .visible-xs-*          可见                        隐藏                       隐藏                      隐藏                                                                                            
                                                                                                                  
.visible-sm-*          隐藏                        可见                        隐藏                      隐藏

.visible-md-*          隐藏                        隐藏                        可见                      隐藏

.visible-lg-*            隐藏                        隐藏                        隐藏                      可见

.hidden-xs              隐藏                       可见                        可见                       可见

.hidden-sm              可见                      隐藏                        可见                        可见

.hidden-md              可见                      可见                        隐藏                        可见

.hidden-lg                可见                      可见                         可见                       隐藏

6.Bootstrap下拉菜单    如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。

例如：

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
　　<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
　　<li role="presentation">
　　　　<a role="menuitem" tabindex="-1" href="#">Java</a>
　　</li> 
　　<li role="presentation">
　　　　<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
　　</li>
</ul>

上面代码表示一个下拉菜单，下拉名称为主题，下拉项有Java和数据挖掘2项。

7.Bootstrap输入框组

使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素。例如用户名输入框、密码输入框，邮箱输入，都可以用到。

输入框组大小的调整：可以通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小。输入框中的内容会自动调整大小。

8.Bootstrap导航元素

导航元素以一个带有 class .nav 的无序列表开始。代码示例如下：导航栏的名称为导航菜单，导航元素里有Home、SVN、iOS、VB.Net、Java、PHP  6个选项。

<p>导航菜单</p>

    <ul class="nav nav-tabs">

    　　<li class="active"><a href="#">Home</a></li>

　 　　<li><a href="#">SVN</a></li>

    　　<li><a href="#">iOS</a></li>

    　　<li><a href="#">VB.Net</a></li>

    　　<li><a href="#">Java</a></li>

    　　<li><a href="#">PHP</a></li>

    </ul>

9.Bootstrap警告（Alerts）

创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。

　　示例：

　　

<div class="alert alert-success">成功！很好地完成了提交。</div>

　　<div class="alert alert-info">信息！请注意这个信息。</div>

　　<div class="alert alert-warning">警告！请不要提交。</div>

　　<div class="alert alert-danger">错误！请进行一些更改。</div>

10.Bootstrap轮播

<div id="myCarousel" class="carousel slide">

　　<!-- 轮播（Carousel）指标 -->

　　<ol class="carousel-indicators">

　　　　<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

　　　　<li data-target="#myCarousel" data-slide-to="1"></li>

　　　　<li data-target="#myCarousel" data-slide-to="2"></li>

　　</ol>

　　<!-- 轮播（Carousel）项目 -->

　　<div class="carousel-inner">

　　　　<div class="item active">

　　　　　　<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div>

　　　　<div class="item">

　　　　　　<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div>

　　　　<div class="item">

　　　　　　<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div>

　　　　</div> <!-- 轮播（Carousel）导航 -->

　　　　<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo; </a>

　　　　<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo; </a>

</div>