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