前言
最近在學(xué)習(xí)研究前端開(kāi)發(fā), 學(xué)了JS之後想學(xué)一學(xué)bootstrap.
經(jīng)過(guò)
邊看教程邊去官網(wǎng)找lib臨摹, 結(jié)果一不小心沒(méi)有注意bootstrap的版本以及作者教程所用庫(kù)的版本, 踩到一顆地雷, 把我雷的裡嫩外焦.
示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="./css/bootstrap2.css"/>
<link rel="stylesheet" href="./css/custom.css"/>
</head>
<body>
<h2>Hello World</h2>
<div class="row">
<div class="span9">span8
<div class="row">
<div class="span1 offset3">span1 offset3 </div>
<div class="span3">span3</div>
</div>
</div>
<div class="span3">span3</div>
</div>
</body>
</html>
bootstrap2 example
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="./css/bootstrap.css"/>
<link rel="stylesheet" href="./css/custom.css"/>
</head>
<body>
<!--<div class="container">-->
<h2>Hello World</h2>
<div class="row">
<div class="span9">span8
<div class="row">
<div class="span1 offset1 dark">span1 offset3</div>
<div class="span3">span3</div>
</div>
</div>
<div class="span3">span3</div>
</div>
</body>
</html>
bootstrap3 example
解決方法
看清楚引用包裡的版本, 多練習(xí).
學(xué)到了什麼
bootstrap全都是12 Column分行, 從bt2轉(zhuǎn)戰(zhàn)bt3, 當(dāng)然了, 基礎(chǔ)的知識(shí)還是一樣的.
推薦幾篇文章
Bootstrap2和3的區(qū)別與選擇指南
BootStrap 3 完全學(xué)習(xí)路徑及前景分析
2 to 3 migration guide英文
2 to 3 migration guide中文
bootstrap3: the new grid system
- custom.css, 教程裡給的, 高亮了dark, 用於加深理解nested rows.
/* General */
body {
margin-top: 3em;
}
/* Custom */
.custom-cols {
background-color: #ffe5e0;
display: block;
height: 200px;
}
[class*="span"] {
background-color: #AAE1EE;
}
.dark {
background-color: #2ab4d5;
}
