第六节：BootStrap
Python,第三章：前端

9251 字
|
39 分钟

BootStrap

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

使用BootStrap 可以将它预先下载到电脑上并放入静态文件中，也可以通过直接在HTML文件里导入cdn链接进行使用，cdn链接可以直接使用各种搜素哦引擎轻松获得。

一、Bootstrap布局

1、概览

1.移动设备优先

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2.Normalize.css

BootStrap内置了Normalize.css

3.布局容器

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

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

<div class="container">
...
</div>

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

<div class="container-fluid">
...
</div>

2、栅格系统

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

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）”所在的元素将被作为一个整体另起一行排列。

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

· 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-不存在， 也影响大屏幕设备。

2.栅格参数

3. 栅格系统使用

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

<div class="row">
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
 <div class="col-md-8">.col-md-8</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-6">.col-md-6</div>
 <div class="col-md-6">.col-md-6</div>
</div>

4.不同屏幕设置不同宽度


 
.col-xs-12 .col-sm-6 .col-md-8

 
.col-xs-6 .col-md-4





 
.col-xs-6 .col-sm-4

 
.col-xs-6 .col-sm-4

 
 

 
.col-xs-6 .col-sm-4

5.列偏移

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

<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <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-3</div>
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

6.列位置移动

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

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

3、排版

1.标题

HTML 中的所有标题标签，

到

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

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

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

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

2.突出显示

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

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

3.对齐

<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>

4.改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

5.引用

<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 Title</cite></footer>
</blockquote>
<blockquote class="blockquote-reverse">
...
</blockquote>

6.列表

无样式列表

<ul class="list-unstyled">
 <li>...</li>
</ul>

内联列表

<ul class="list-inline">
 <li>...</li>
</ul>

水平排列的内联列表

<dl class="dl-horizontal">
 <dt>...</dt>
 <dd>...</dd>
</dl>

4、代码

1.内联代码

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

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

2.用户输入

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

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

3.代码块

多行代码可以使用 

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


<pre><p>Sample text here...</p></pre>


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


4.变量


通过  标签标记变量。


<var>y</var> = <var>m</var><var>x</var> + <var>b</var>


5.程序输出


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


<samp>This text is meant to be treated as sample output from a computer program.</samp>


5、表格


1.基本


为任意 

 标签添加 .table 类可以为其赋予基本的样式
<table class="table">
...
</table>
2.条纹状表格
<table class="table table-striped">
...
</table>
3.带边框的表格
<table class="table table-bordered">
...
</table>
4.鼠标悬停
<table class="table table-hover">
...
</table>
5.紧缩表格
<table class="table table-condensed">
...
</table>
6.状态类
通过这些状态类可以为行或单元格设置颜色。

















*Class*
*描述*






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




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




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




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




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






7.响应式表格


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


6、 表单


1.基本实例


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