快速入门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!!!