BootStrap布局

1 什么是BootStrap

  • 由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架
    简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

2 BootStrap的版本

  • BootStrap2
  • BootStrap3
  • BootStrap4

3 BootStrap 下载

  • 用于生产环境的Bootstrap

  • Bootstrap Less 源码
    Bootstrap Sass 源码

4 CDN服务

1
2
3
4
5
6
7
8
9
10
11
 

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>


<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

5 目录结构

生产环境版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

6 基本模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
html>
<html lang="zh-CN">
  <head>
    
    
    
    
    <title>Bootstrap 101 Templatetitle>

    
    <link href="css/bootstrap.min.css" rel="stylesheet">

    
    
    
  head>
  <body>
    <h1>你好，世界！h1>

    
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>
    
    <script src="js/bootstrap.min.js">script>
  body>
html>

7 浏览器支持

手机浏览器

——-ChromeFirefoxSafari
Android Supported Supported N/A
iOS Supported Supported Supported

桌面浏览器

———ChromeFirefoxInternet ExplorerOperaSafari
Mac Supported Supported N/A Supported Supported
Windows Supported Supported Supported Supported Not supported

8 浏览器兼容

让 IE8 支持H5新标签

页面中引入respond.js

1
2
 

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js">script>

IE兼容模式

页面中添加如下代码

1
2
 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

国产浏览器切换webkit内核

页面中添加如下代码

1
 
<meta name="renderer" content="webkit">

1 Bootstrap布局

1.1 移动设备优先

为了确保适当的绘制和触屏缩放，需要在  之中添加 viewport 元数据标签。

1
2


在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

1
2


1.2 Normalize.css

BootStrap内置了Normalize.css

1.3 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

1
2
3
 
<div class="container">
  ...
div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

1
2
3
 
<div class="container-fluid">
  ...
div>

2 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

2.1 栅格系统简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

2.2 栅格参数

 超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
最大列（column）宽 自动 ~62px ~81px ~97px

2.3 栅格系统使用

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<div class="row">
  <div class="col-md-1">.col-md-1div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1div>
  <div class="col-md-1">.col-md-1div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1div>
  <div class="col-md-1">.col-md-1div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1div>
  <div class="col-md-1">.col-md-1div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1div>
div>
<div class="row">
  <div class="col-md-8">.col-md-8div>
  <div class="col-md-4">.col-md-4div>
div>
<div class="row">
  <div class="col-md-4">.col-md-4div>
  <div class="col-md-4">.col-md-4div>
  <div class="col-md-4">.col-md-4div>
div>
<divclass="row">
<divclass="col-md-6">.col-md-6div>
<divclass="col-md-6">.col-md-6div>
div>

2.4 不同屏幕设置不同宽度

1
2
3
4
5
6
7
8
9
10
11
 
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4div>
  
  <div class="clearfix visible-xs-block">div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4div>
div>

2.5 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

1
2
3
4
5
6
7
8
9
10
11
 
<div class="row">
  <div class="col-md-4">.col-md-4div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3div>
div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3div>
div>

2.6 列位置移动

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

1
2
3
4
 
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
div>

3 排版

3.1 标题

HTML 中的所有标题标签，

 到 
 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

1
2
3
4
5
6
 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap headingh2>
<h3>h3. Bootstrap headingh3>
<h4>h4. Bootstrap headingh4>
<h5>h5. Bootstrap headingh5>
<h6>h6. Bootstrap headingh6>

在标题内还可以包含  标签或赋予 .small 类的元素，可以用来标记副标题。

1
2
3
4
5
6
 
<h1>h1. Bootstrap heading <small>Secondary text</small>h1>
<h2>h2. Bootstrap heading <small>Secondary textsmall>h2>
<h3>h3. Bootstrap heading <small>Secondary textsmall>h3>
<h4>h4. Bootstrap heading <small>Secondary textsmall>h4>
<h5>h5. Bootstrap heading <small>Secondary textsmall>h5>
<h6>h6. Bootstrap heading <small>Secondary textsmall>h6>

3.2 突出显示

通过添加 .lead 类可以让段落突出显示。

1
 
<p class="lead">...p>

3.3 对齐

1
2
3
4
5
 
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.p>
<p class="text-right">Right aligned text.p>
<p class="text-justify">Justified text.p>
<p class="text-nowrap">No wrap text.p>

3.4 改变大小写

1
2
3
 
<p class="text-lowercase">Lowercased text.p>
<p class="text-uppercase">Uppercased text.p>
<p class="text-capitalize">Capitalized text.p>

3.5 引用

1
2
3
4
5
6
7
8
9
10
 
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>
blockquote>
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>
  <footer>Someone famous in <cite title="Source Title">Source Titlecite>footer>
blockquote>
<blockquote class="blockquote-reverse">
  ...
blockquote>

3.6 列表

无样式列表

1
2
3
 
<ul class="list-unstyled">
  <li>...li>
ul>

内联列表

1
2
3
 
<ul class="list-inline">
  <li>...li>
ul>

水平排列的内联列表

1
2
3
4
 
<dl class="dl-horizontal">
  <dt>...dt>
  <dd>...</dd>
dl>

4 代码

4.1 内联代码

通过  标签包裹内联样式的代码片段。

1
 
For example, <code><section>code> should be wrapped as inline.

4.2 用户输入

通过  标签标记用户通过键盘输入的内容。

1
2
 
To switch directories, type <kbd>cdkbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrlkbd> + <kbd>,kbd>kbd>

4.3 代码块

多行代码可以使用 

 标签。为了正确的展示代码，注意将尖括号做转义处理。








1




<pre>&lt;p&gt;Sample text here...&lt;/p>pre>








还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。


4.3 变量


通过  标签标记变量。








1




<var>y</var> = mvar><var>xvar> + <var>bvar>








4.4 程序输出


通过  标签来标记程序输出的内容。








1




This text is meant to be treated as sample output from a computer program.








5 表格


5.1 基本


为任意 
 标签添加 .table 类可以为其赋予基本的样式








1
2
3




<table class="table">
  ...
table>








5.2 条纹状表格








1
2
3




<table class="table table-striped">
  ...
table>








5.3 带边框的表格








1
2
3




<table class="table table-bordered">
  ...
table>








5.4 鼠标悬停








1
2
3




<table class="table table-hover">
  ...
table>








5.5 紧缩表格








1
2
3




<table class="table table-condensed">
  ...
table>








5.6 状态类


通过这些状态类可以为行或单元格设置颜色。





Class描述





.active
鼠标悬停在行或单元格上时所设置的颜色




.success
标识成功或积极的动作




.info
标识普通的提示信息或动作




.warning
标识警告或需要用户注意




.danger
标识危险或潜在的带来负面影响的动作






5.7 响应式表格


将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。


6 表单


6.1 基本实例


单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、