1. 程式人生 > >快速入門bootstrap

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