Bootstrap

目录

• 一、Bootstrap
  • 1. 布局容器
  • 2. 栅格系统
    • 2.1 栅格参数
    • 2.2 列偏移
  • 3. 表格
  • 4. 表单
  • 5. 按钮
    • 5.1 预定义样式
  • 6. 快速浮动

一、Bootstrap

详见：https://v3.bootcss.com/css/#buttons

响应式布局：根据手机/电脑屏幕大小不同显示不同的界面

Bootstrap 是移动设备优先的。

1. 布局容器

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

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

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

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

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

2. 栅格系统

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

默认情况下，一个row就是一行。

每个row默认会均分成12份，你可以通过col-md-Num 来选择你想要占几份。

2.1 栅格参数

xs  //手机屏幕，最小
		 
sm  // 平板，中小屏幕

md  // 普通显示器，中等屏幕

lg  // 超大显示器，大屏幕

2.2 列偏移

col-md-offset-1

3. 表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

4. 表单

表单加样式  你只需要记一个   form-control

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

5. 按钮

为 <a>、<button> 或 <input> 元素添加按钮类.btn

5.1 预定义样式

<button type="button" class="btn btn-default">（默认样式）Default</button>

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-info">（一般信息）Info</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危险）Danger</button>

<button type="button" class="btn btn-link">（链接）Link</button>

6. 快速浮动

通过添加一个类，可以将任意元素向左或向右浮动。

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