LearnFromWrite-bootstrap

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

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

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

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

2.栅格系统
row必须包含在.container中，以便为其赋予合适的alignment和padding

这里row还带有清除浮动，栅格系统自身也是利用浮动的原理建立起来的

3.页面主体
Bootstrap将全局font-size设置为14px，line-height设置为1.428，这些设置都直接赋予了body元素和所有的段落元素，p元素还被设置了等于1/2的行高（即10px）和底部外边距margin-bottom

4.文本对齐：主要就是text-left/text-center/text-right

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

5.导航
最外层：

<nav class="nav navbar-default">
 ...
</nav>

向内一层:

<nav class="nav navbar-default">
  <div class="container">
    ...
  </div>
</nav>

导航头：

<nav class="nav navbar-default">
  <div class="container">
    <div class="navbar-header">

      // 这部分就是缩小版面后右上角的三条缩略横杠,缩略的部分就是data-target的部分
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"  data-target="#navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button>
      // 这部分就是缩小版面后右上角的三条缩略横杠,缩略的部分就是data-target的部分

      // 这部分就是导航条左上角的网站的标题
      <a class="navbar-brand" href="#">Brand</a>
      // 这部分就是导航条左上角的网站的标题
    </div>
  </div>
</nav>

导航的主体内容：
在navbar-header部分data-target="collapse"和下面的data-toggle="dropdown"是不同的

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      ...
    </div>
    <div class="collapse navbar-collapse" id="#navbar-collapse">
      <ul class="nav navbar">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">span<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">选项1</a></li>
            <li><a href="#">选项2</a></li>
            <li><a href="#">选项3</a></li>
          </ul>
        </li>
      </ul>

      //   form在navbar中
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        //   form在navbar中

        </div>
      </form>
    </div>
  </div>
</nav>

6.巨幕
如果我们不需要巨幕里面的内容内缩而使其左右对齐，我们就在组件外，在巨幕内添加.container的div

<div class="jumbotron">
  <h1>Hello,world</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#">Learn More</a></p>
</div>

7.媒体对象
类似评论回复的样式

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4>...</h4>
    <p>...</p>
  </div>
  </div>
</div>

比如下面一个人回复了，我们就可以把新的div.media再往下面逐层展开一套新的并将其添加到上面的p标签后
8.表单

内联表单

<form class="form-inline">
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" placeholder="Your Name">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" placeholder="Your password">
  </div>
  <button class="btn btn-default">Submit</button>
</form>

LearnFromWrite-bootstrap

推荐阅读更多精彩内容