因为公司选择了使用BootStrap3作为项目的前台展示框架，所以花了半天时间来学习Bootstrap, 如果你是第一次听说，或者说以前听说过，但没有使用过这个框架的话，希望这篇入门实战能够让你快速掌握。

什么是BootStrap?

基于HTML，CSS，JAVASCRIPT的简洁灵活的流行前端框架及交互组件集,由Twitter的经验丰富的工程师和设计师奉献。说得更具体点就是基于12列的栅格布局的HTML,Javascript使用定制的jQuery插件，用LESS构建CSS等技术构建的响应式设计，跨设备，跨浏览器，而且最主要就是入门门槛非常低，既能用来开发简单的小东西，也能构造更为复杂的应用。完美支持HTML5/CSS 标签和语法，源码托管在GitHub。

如何入手？

1，下载bootstrap,官网下载到customize components. 使用到的jquery可以使用CDN,直接至官网http://jquery.com的最下面有一段cdn的链接，复制下来即可，至于是使用http还是https由你自己决定。我做的示例就是直接使用的http.

2，工具和将要使用的类库都准备好了，接下来，在notepad++中输入html代码，在我看来，手写html是一种好习惯，先建出框架出来，

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.     <head>
  5.         <title>Bootstrap3</title>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <link href="css/bootstrap.min.css" rel="stylesheet">
  8.     </head>
  9.  
  10.     <body>
  11.         <div class="navbar navbar-inverse navbar-static-top">
  12.             <div class="container">
  13.                 <a href="#" class="navbar-brand">BootStrap3 Study</a>
  14.             </div>
  15.         </div>
  16.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  17.         <script src="js/bootstrap.js"></script>
  18.     </body>
  19.  
  20. </html>

navbar_only

3,  个人从这个简单的框架中得出的一个重要的结论就是div布局牢记，不管什么，先最好弄个div套住，然后再二层弄个div并冠以container class是最佳实践。例如要创建一个头部的导航菜单,先创建一个div,然后再弄个二级div叫container，第三层就是菜单内容，可以平行多个。如图示

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Bootstrap3 Study</title>
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <link href="css/bootstrap.min.css" rel="stylesheet">
  7.         <link href="css/bootstrap_study.css" rel="stylesheet">
  8.     </head>
  9.     <body>
  10.         <div class="navbar navbar-inverse navbar-static-top">
  11.             <div class="container">
  12.                 <a  class ="navbar-brand" href="#">Bootstrap3</a>
  13.                 <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeadMenu" >
  14.                     <span class="icon-bar"/>
  15.                     <span class="icon-bar"/>
  16.                     <span class="icon-bar"/>
  17.                 </button>
  18.                 <div class="collapse navbar-collapse navHeadMenu">
  19.                     <ul class="nav navbar-nav navbar-right">
  20.                         <li class="active"><a href="#">Home</a></li>
  21.                         <li><a href="#">Blog</a></li>
  22.                         <li class="dropdown">
  23.                             <a class="dropdown-toggle" data-toggle="dropdown">Technologies<b class="caret"></b></a>
  24.                             <ul class="dropdown-menu">
  25.                                 <li><a href="#">Java</a></li>
  26.                                 <li><a href="#">C#</a></li>
  27.                             </ul>
  28.                         </li>
  29.                         <li><a href="#">About</a></li>
  30.                         <li><a href="#">Contact</a></li>
  31.                     </ul>
  32.                 </div>
  33.             </div>
  34.         </div>
  35.  
  36.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  37.         <script src="js/bootstrap.min.js"></script>
  38.     </body>
  39. </html>

点开查看全部源代码

bootstrap.css是很语义化的一个css. 真心建议阅读一下源代码。

4， 接下来就建一个底部的navigator， 按照我的体验，先弄个div与head navigator平级，然后里面再弄个container的div. 如下面这样子。

  1. <div class="navbar navbar-default navbar-fixed-bottom">
  2.             <div class="container">
  3.                 <p class="navbar-text pull-left">Create by BP</p>
  4.                 <a class="navbar-btn btn btn-danger pull-right" href="#">Subscribe on Tudou</a>
  5.             </div>
  6.         </div>

头部的navigator用的是navbar-static-top, 顶部嘛，当然是top,所以底部使用navbar-fixed-bottom, 靠左靠右使用的语义就是拉到左边，拉到右边。单词之间的空隙用的是-就可以了。

5， 其实，我上面说的有点绝对，并不能说是先弄个div，应该说弄一个有意义的div才合适，换句通俗点的话，就是弄个有class名称的div，然后再套个container的div. 举个例子就是我想在网页的上面显示一点大的字体块，用来说明一些简明扼要的信息，可以使用到jumbtron这个类。那么我的html就是在body的下一级加一个如下的div

  1.         <div class="container">
  2.             <div class="jumbotron">
  3.                 <center>
  4.                     <h1>Hello, World!</h1>
  5.                     <p>As a best practice, we highly recommend using the element whenever possible to ensure matching cross-browser rendering.</p>
  6.                     <a class="btn btn-default" href="#">Watch Now!</a>
  7.                     <a class="btn btn-info" href="#">Tweet it!</a>
  8.                 </center>
  9.             </div>
  10.         </div>

jumbotron是有圆角定义的，如果你将其移到container那个地方的话，圆角就没了，所以还是另套一个div 最为合适。

6，最后讲一个重量级的自适应的表格布局，在做这个布局之前，牢记一点，bootstrap的布局是一个基于12格的布局。作为表格，肯定是有行row和列col的。对于语义化很的bootstrap3自然也会考虑到这些，所以，在上面5点的基础上，可以很快得到一个代码编写流程：container的div下面建一个row的div，然后再在row的下面建一些col即可完成。

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-3">
  4.     。。。。。
  5.         </div>
  6.     </div>
  7. </div>

架构是这样子，因为col列里面是占3个格的，共12格，所以col列这个div应该重复4次。

  1.         <div class="container">
  2.             <div class="row">
  3.                 <div class="col-md-3">
  4.                     <h3><a href = "#">$500 Gaming PC Build</a></h3>
  5.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  6.                     <a class="btn btn-default" href="#">Read More</a>
  7.                 </div>
  8.                 <div class="col-md-3">
  9.                     <h3><a href = "#">$500 Gaming PC Build</a></h3>
  10.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  11.                     <a class="btn btn-default" href="#">Read More</a>
  12.                 </div>
  13.                 <div class="col-md-3">
  14.                     <h3><a href = "#">$500 Gaming PC Build</a></h3>
  15.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  16.                     <a class="btn btn-default" href="#">Read More</a>
  17.                 </div>
  18.                 <div class="col-md-3">
  19.                     <h3><a href = "#">$500 Gaming PC Build</a></h3>
  20.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  21.                     <a class="btn btn-default" href="#">Read More</a>
  22.                 </div>
  23.             </div>
  24.         </div>

点开查看全部的col-md-3

7, modal窗体的使用，在bootstrap3里面，实现一个模式窗体是不需要写任何js代码的。定义一个modal fade的div,然后千万千万记得设一个id, 至于modal窗体的结构就是：modal-dialog->modal-content->modal-header->modal-body->modal-footer. 如果你很好奇我为什么上一句说千万千万记得设一个id,那么你悟了，如果有id,那么你在类似于a 标签中就可以这样子用<a href="#id" data-toggle="modal">然后你点击这个链接时，就弹出了自定义的模式窗体了。

  1. <div class="modal fade" id="contact">
  2.             <div class="modal-dialog">
  3.                 <div class="modal-content">
  4.                     <div class="modal-header">
  5.                         <h4>Contact US</h4>
  6.                     </div>
  7.                     <div class="modal-body">
  8.                         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  9.                     </div>
  10.                     <div class="modal-footer">
  11.                         <a class="btn btn-default" data-dismiss="modal">Close</a>
  12.                         <a class="btn btn-primary" data-dismiss="modal">OK</a>
  13.                     </div>
  14.                 </div>
  15.             </div>
  16.         </div>
  17.  
  18. =============
  19. invoke code like following:
  20.  <li><a href="#contact" data-toggle="modal">Contact</a></li>

点出查看详细实现代码

8, 一般的，文章不可能是像6所说的几列显示，一篇文章就是一页是很符合人的阅读习惯的，bootstrap也考虑到了这些，就定义出了一个panel类出来。当然带图片的话，还可以带个featuredImg的class出来。可以定义一个结构：panel panel-default ->panel-body->page-header...

  1.         <div class="container">
  2.             <div class="row">
  3.                 <div class="col-lg-9">
  4.                     <div class="panel panel-default">
  5.                         <div class="panel-body">
  6.                             <div class="page-header">
  7.                                 <h3>Whatever you want <small>Posted on Oct 26th</small></h3>
  8.                             </div>
  9.                             <img class="featuredImg" src="img/Lighthouse.jpg" width="100%"/>
  10.                             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  11.                             <h4> A heading</h4>
  12.                             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  13.                         </div>
  14.                     </div>
  15.                 </div>
  16.             </div>
  17.         </div>

点击这里查看完整的panel结构

9， 由于8中使用的是col-lg-9，剩余3列的，我们用来做SideBar的效果，使用list-group。

  1.                 <div class="col-lg-3">
  2.                     <div class="list-group">
  3.                         <a href="#" class="list-group-item active">
  4.                             <h4 class = "list-group-item-heading">Lorem ipsum</h4>
  5.                             <p class = "list-group-item-text">Fusce consequat eu risus sit amet vehicula. Maecenas auctor odio ipsum. Phasellus convallis est eu cursus lacinia.</p>
  6.                         </a>
  7.                         <a href="#" class="list-group-item">
  8.                             <h4 class = "list-group-item-heading">Lorem ipsum</h4>
  9.                             <p class = "list-group-item-text">Fusce consequat eu risus sit amet vehicula. Maecenas auctor odio ipsum. Phasellus convallis est eu cursus lacinia.</p>
  10.                         </a>
  11.                         <a href="#" class="list-group-item">
  12.                             <h4 class = "list-group-item-heading">Lorem ipsum</h4>
  13.                             <p class = "list-group-item-text">Fusce consequat eu risus sit amet vehicula. Maecenas auctor odio ipsum. Phasellus convallis est eu cursus lacinia.</p>
  14.                         </a>
  15.                     </div>
  16.                 </div>

完整sidebar结构点击这里

10，对modal进行一些advance, 可以在modal-content里面加个form-horizontal也是可以的。也就是将modal-header/body/footer将在form里面。

  1.                     <form class="form-horizontal">
  2.                         <div class="modal-header">
  3.                             <h4>Contact US</h4>
  4.                         </div>
  5.                         <div class="modal-body">
  6.                             <div class ="form-group">
  7.                                 <label for = "contact-name" class = "col-lg-2 control-label">Name:</label>
  8.                                 <div class = "col-lg-10">
  9.                                     <input type = "text" class = "form-control" id = "contact-name" placeholder = "Full Name">
  10.                                 </div>
  11.                             </div>
  12.                             <div class = "form-group">
  13.                                 <label for = "contact-email" class = "col-lg-2 control-label">Email:</label>
  14.                                 <div class = "col-lg-10">
  15.                                     <input type = "email" class = "form-control" id = "contact-email" placeholder = "you@example.com">
  16.                                 </div>
  17.                             </div>
  18.                             <div class = "form-group">
  19.                                  <label for = "contact-msg" class = "col-lg-2 control-label">Message:</label>
  20.                                  <div class = "col-lg-10">
  21.                                     <textarea class = "form-control" rows = "8"></textarea>
  22.                                  </div>
  23.                             </div>
  24.                         </div>
  25.                         <div class="modal-footer">
  26.                             <a class="btn btn-default" data-dismiss="modal">Close</a>
  27.                             <button class="btn btn-primary" type="submit">Send</button>
  28.                         </div>
  29.                     </form>

完整的form结构

如此上面这般，第一个自适应的网页就可以说是完成了，有头部菜单导航，有底部说明，有中间算是广告的醒目标题，也有自适应的grid表格布局。

Bootstrap3 入门实战的更多相关文章

  1. Spark入门实战系列--10.分布式内存文件系统Tachyon介绍及安装部署

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Tachyon介绍 1.1 Tachyon简介 随着实时计算的需求日益增多,分布式内存计算 ...

  2. 003-Tuple、Array、Map与文件操作入门实战

    003-Tuple.Array.Map与文件操作入门实战 Tuple 各个元素可以类型不同 注意索引的方式 下标从1开始 灵活 Array 注意for循环的until用法 数组的索引方式 上面的for ...

  3. Scala深入浅出实战经典-----002Scala函数定义、流程控制、异常处理入门实战

    002-Scala函数定义.流程控制.异常处理入门实战 Scala函数定义 语句结束无分号 定义无参函数 def 函数名称(参数名称:参数类型)[:Unit=]{ 函数体 } 老师的代码 我的实际代码 ...

  4. Spark入门实战系列--1.Spark及其生态圈简介

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .简介 1.1 Spark简介 年6月进入Apache成为孵化项目,8个月后成为Apache ...

  5. Spark入门实战系列--2.Spark编译与部署（上）--基础环境搭建

    [注] 1.该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取: 2.Spark编译与部署将以CentOS 64位操作系统为基础,主要是考虑到实际应用 ...

  6. Spark入门实战系列--2.Spark编译与部署（中）--Hadoop编译安装

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .编译Hadooop 1.1 搭建环境 1.1.1 安装并设置maven 1. 下载mave ...

  7. Spark入门实战系列--2.Spark编译与部署（下）--Spark编译安装

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .编译Spark .时间不一样,SBT是白天编译,Maven是深夜进行的,获取依赖包速度不同 ...

  8. Spark入门实战系列--3.Spark编程模型（上）--编程模型及SparkShell实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Spark编程模型 1.1 术语定义 l应用程序(Application): 基于Spar ...

  9. Spark入门实战系列--3.Spark编程模型（下）--IDEA搭建及实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 . 安装IntelliJ IDEA IDEA 全称 IntelliJ IDEA,是java语 ...

随机推荐

  1. js前台与后台数据交互

    客户端脚本一般都在前台,这里讲的是(1)在后台调用前台定义的脚本(2)在后台如何注册客户端脚本 用途 何时使用服务器代码向页中添加客户端脚本: u 当客户端脚本的内容依赖于直到运行时才可用的信息时 u ...

  2. UCOS 信号量的初值问题

    当 pend请求发出的时候信号量的值减1,当post的时候信号量的值加1,信号量的值0跟1分别是用来同步跟互斥的,什么是同步,什么是互斥呢...假设你把信号量的值设为0,有A,B连个任务,当A发出pe ...

  3. java批量转换图片格式

    废话不多直接上代码,代码其实也不多.... package com.qiao.testImage; import java.awt.image.BufferedImage; import java.i ...

  4. PHP 访问类中的静态属性

    静态属性和普通属性不一样,静态属性只属于类本身而不属于类的任何实例,所以他们的访问方式也不一样.你可以把静态属性认为是存储在类当中的全局变量,而且你可以在任何地方通过类来访问它们. 在类本身中访问静态 ...

  5. Gridview中修改某列的背景色

    Gridview中状态列的值是1,某列的背景是是绿色状态字段是:archivesStatus protected void gvInfo_RowDataBound(object sender, Gri ...

  6. myEclipse异常解决:Errors occurred during the build. Errors running builder Mule 3 hot deployment

    选择一个项目—-右键Properties—-Builders—-取消 “JavaScript Validator”  和 Mule 3 hot deployment 的勾就OK了 根据具体异常,勾选. ...

  7. COJ WZJ的数据结构（负十八）splay_tree的天堂

    WZJ的数据结构(负十八) 难度级别:E: 运行时间限制:100000ms: 运行空间限制:700KB: 代码长度限制:2000000B 试题描述 对于前一段样例: 输入 输入文件的第1行包含两个数N ...

  8. 【转】Java 多线程（四） 多线程访问成员变量与局部变量

    原文网址:http://www.cnblogs.com/mengdd/archive/2013/02/16/2913659.html 先看一个程序例子: public class HelloThrea ...

  9. office web apps server 问题和解决办法

    New-OfficeWebAppsFarm –InternalURL "http://owa.zjkhlib.com" –AllowHttp –EditingEnabled 错误1 ...

  10. jzp线性筛及其简单应用

    前言: 很久以前看过了线性筛,没怎么注意原理,但是后来发现线性筛还有很有用的.. 比如上次做的一道题就需要找出每个数的最小质因子,先筛再找就太慢了..一看线性筛发现就可以直接在筛的过程中处理出来了! ...