boostrap的一些简单介绍

在做前端的时候，一个高端，大气，上档次的页面是程序员追求的目标，不仅能体现我们的技术水平，也能很容易的吸引客户，而bootstrap就是一个可以帮助我们写出一个不错的页面的工具。现在一般用的都是bootstrap3,所以下面我来总结一下bootstrap3：

首先讲讲它的栅格系统：

根据不同屏幕的大小，比如：手机，平板，电脑设备的大小，将栅格分为.col-xs-12 .col-sm-12 .col-md-12这三种比例的大小。每一行所占用的最多的是12个栅格，自己在设置的时候可以根据实际情况来设计比例，比如4：8等等。

bootstrap的好处在于，它吧很多css样式打包成了一个一个类，在html的标签中直接调用就可以做出一个很漂亮的东西。比如我们常用的按钮，在标签的类中，直接添加"btn btn-default"这样的类，就可以使用它自己设定好的css样式，既简单又大气。

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

input框也有类似的方法，比如“from-control“,虽然bootstrop在设定大小的时候有自己的一些方法但是这些按钮或者input框基本上都不是我们想要大小，虽然样式好看，但布局确实一大问题，无法随心所欲。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

这三条可以设置高度。

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

可以用栅格设置宽度。

表单类的bootstrap类有”from-group“和checkbox等不同的类：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

这些bootstrap中也有很多设置不同css样式类，比如颜色，形状等，具体可以去http://v3.bootcss.com/css查看

boostrap的一些简单介绍

猜你喜欢