Bootstrap初学

为什么前端不用Bootstrap

image.png

1.Bootstrap 引入

2.网格/栅栏系统

布局容器

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

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

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

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

栅栏系统

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

1..row必须加，不然会少30像素

image.png

2.列偏移

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

image.png

3.向让格子靠右：
除了写 col-md-offesr_*,还可以写pull-right

3.响应式怎么用

• col-lg一般用于大屏设备
  (min-width:1200px)
• col-md一般用于中屏设备
  (min-width：992px)
• col-sm一般用于小屏设备
  min-width：768px)
• col-xs用于超小型设备，(max-width：768px);

后面跟数字是几，也就是占几份,比如是4，也就是一行可以显示3个;或者12，就是一行可以显示1个。关于使用，一般设置的话四个属性都用到会比较好，这样就可以在不同屏幕上很好的展示。比如你有了12个section标签，你想让他们在不同屏幕大小的时候有不同的展示方式，大屏时一行显示6个，中屏时一行显示3个，小屏时一行展示2个，超小屏一行展示1个，你就可以在每一个section标签里面这样写:<section class = “col-lg-2 col-md-4 col-sm-6 col-xs-12”></section>

。

4.Bootstrap CSS 组件怎么用

文档 复制 粘贴

5. Bootstrap 主题选择

下载的bootstap自带的主题

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

Google bootsrap 主题
Awesome bootstrap themes