bootstrap v3笔记（全局css样式）

bootstrap笔记

布局容器

bootstrap为页面内容和栅格系统提供了一个container容器

第一、

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

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

第二、

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

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

栅格系统

简介

栅格系统用于通过一系列的行（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-* 不存在， 也影响大屏幕设备。

媒体查询

超小屏幕 手机（<768px）：`.col-xs-`
小屏幕 平板 (≥768px):`.col-sm-`
中等屏幕 桌面显示器 (≥992px):`.col-md-`
大屏幕 大桌面显示器 (≥1200px):`.col-lg-`

代码示例

<div class="container">
  <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>
</div>

效果图：

注：如果在一个 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

列偏移

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

代码示例：

<div class="container">
  <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>
</div>

效果图

嵌套列

可以在col内再写一个row用以实现效果

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

效果图

列排序

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

代码示例：

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

效果图

排版

标题：<h1>标题</h1>...<h6>标题</h6>
副标题：<h1>标题<small>副标题</small></h1>...<h6>标题</h6>
文本：<p>文本</p>
中心内容：<p class="lead">文本</p>

内联文本元素：
	被删除的文本：<del>被删除的内容</del>
	无用文本:<s>无用文本</s>
	插入文本：<ins>插入文本</ins>
	带下划线的文本：<u>带下划线的文本</u>
	文本对齐：<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>
	斜体：<em>text</em>
	着重：<strong> text</strong>
	大小写：<p class="text-lowercase">Lowercased text.</p> ##小写
		<p class="text-uppercase">Uppercased text.</p> ## 大写
		<p class="text-capitalize">Capitalized text.</p>## 首字母大写

表格

 <table class="table table-hover table-bordered"> <!-- 表格  鼠标悬停在表格上做出响应  表格边框-->
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <th>sex</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <td>mark</td>
        <td>19</td>
        <td>male</td>
    </tr>
    <tr>
        <th>1</th>
        <td>mark</td>
        <td>19</td>
        <td>male</td>
    </tr>
    <tr>
        <th>1</th>
        <td>mark</td>
        <td>19</td>
        <td>male</td>
    </tr>
    <tr>
        <th>1</th>
        <td>mark</td>
        <td>19</td>
        <td>male</td>
    </tr>
    <tr>
        <th>1</th>
        <td>mark</td>
        <td>19</td>
        <td>male</td>
    </tr>
    </tbody>

</table>

表单

单独的表单控件会被自动赋予一些全局样式。 所有设置了 类的 、 和 元素都将被默认设置宽度属性为 。 将 元素和前面提到的控件包裹在 中可以获得最好的排列。.form-control<input><textarea><select>width: 100%;label.form-group

代码示例：

<form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>

效果图

按钮

<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

效果图

图片

响应式图片

通过为图片添加 类可以让图片支持响应式布局

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

效果图

辅助类

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

内容块居中

<div class="center-block">...</div>

清除浮动

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

显示或隐藏内容

<div class="show">...</div> 显示
<div class="hidden">...</div> 隐藏