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

推荐阅读更多精彩内容

  • Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、...
    郭豪豪阅读 1,628评论 0 8
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 9,027评论 3 183
  • 第2章 Bootstrap 网格系统 在这一章,我们将讨论Bootstrap一个最重要的功能:网格系统。我们将学会...
    海上名月阅读 546评论 0 6
  • 序 简称:bs.集html、css、js框架于一身,功能更强更全。也就是说结构按照基准模板搭建,类名不要随意删改,...
    麦壳儿UIandFE2阅读 876评论 0 1
  • 最近编写了一个小的lldb插件home, 功能很简单:在Finder中打开当前调试的模拟器目录。记录一下心得。 L...
    偶是星爷阅读 880评论 1 0