快速入门bootstrap

bootstrap是框架

会不会css

会

好,学会bootstrap(80%)!!!

框架特点三个: 样式,jq插件,响应式

响应式

响应式是用媒体查询结合一行十二列的栅格布局来完成的

媒体查询就是

@media (min-width: @screen-sm-min) { ... }

栅格布局就是把屏幕当成有一行,分为十二列

如何想要写4个等分一行的div,就写col-sm-3(即3/12=1/4),其余类推

jq插件

引入jquery.js和bootstrap.min.js

根据复制粘贴范例加以修改即可

样式

所有的bootstrap样式都是通过类名来实现,查手册或看源码即可

例如bootstrap不会出现子元素撑不开父元素的问题,如果是普通css,我们就会写float,再清除浮动

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">

看上面代码,再结合源码看

navbar-header类是浮动的,那么必然有个div是清除浮动

再看container类,它就是清除浮动的

那么先写container再写navbar-header就不会出现子元素撑不开父元素

所有bootstrap的特性,都是bootstrap封装好在类名,依照它们的规则,调用再叠加即可

再例如 居中

class="text-center"

bootstrap.css源码

.text-center {
text-align: center;
}

额,这不就只是起了个类名,把text-align:center放在里面,所以说会css,就学会bootstrap(80%)

剩下的就是just do it!!!