在做前端的时候,一个高端,大气,上档次的页面是程序员追求的目标,不仅能体现我们的技术水平,也能很容易的吸引客户,而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查看