前言
最近在學習研究前端開發, 學了JS之後想學一學bootstrap.
經過
邊看教程邊去官網找lib臨摹, 結果一不小心沒有注意bootstrap的版本以及作者教程所用庫的版本, 踩到一顆地雷, 把我雷的裡嫩外焦.
示例
<!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
解決方法
看清楚引用包裡的版本, 多練習.
學到了什麼
bootstrap全都是12 Column分行, 從bt2轉戰bt3, 當然了, 基礎的知識還是一樣的.
推薦幾篇文章
Bootstrap2和3的区别与选择指南
BootStrap 3 完全学习路径及前景分析
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;
}
