快速入門bootstrap
阿新 • • 發佈:2019-02-09
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!!!