8.9 bootstrap学习

bootstrap知识整理

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

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

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

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

---

栅格系统

栅格参数

类前缀    .container 最大宽度  最大列（column）宽
.col-xs-，       自动，               自动，
.col-sm-，       750px，              ~62px ，
.col-md-，       970px，              ~81px ，
.col-lg-，       1170px，             ~97px，

可以创建一个基本的栅格系统： .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>

偏移：.col-md-offset-*
右移：.col-md-push-*
左移：.col-md-pull-*

---

排版

代码

表格

表单

按钮

图片

辅助类

响应式工具