Bootstrap3學習筆記，bootstrap3視頻教程
Bootstrap3簡介----專題1
聲明:本文章是給初學bootstrap3的同學增加記憶的, 一定有很多欠缺和不完善的地方, 希望能協助到大家, 也希望能讓更多的人瞭解boostrap並用在自己的項目中.
本文章的所有代碼請大家在最新的瀏覽器裡運行實驗
Bootstrap是Twitter推出的一個開源的用於前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML架構。Bootstrap提供了優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。
Bootstrap3(以下我就簡稱BT)環境搭建從http://getbootstrap.com/getting-started/擷取BT裡麵包含css fonts js 三個檔案夾 在HTML檔案頭裡引入這些就OK了.
如果不想下載也可以用官方給出的CDN
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
網格的意思就是把頁面分割成格子按照每行分成12列(如果希望修改成24列等等可以LESS重編譯自己定製). 網格系統可以根據裝置的視口響應當小於767px的時候列就會垂直排列,當然列加起來等於12.下面看例子
<!DOCTYPE html><html lang="zh-CN"> <head> <title>Browser Show</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="shortcut icon" href="images/jigsaw.png"> <!-- Bootstrap --> <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style type="text/css"> [class *= col-] { background: #e8e8e8; border: 2px solid #000; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> </div> </body></html>
排版我介紹一些常用到的.BT的預設字型是Helvetica 如果沒有最後還有sans-serif. font-size 14px line-height 20px 段落的margin-bottom 10px
設定段落顏色代表不同語義
<p class="text-warning">warning</p><p class="text-info">info</p><p class="text-success">success</p>表格
BT3中有4種表格的樣式分別是table-striped 條紋背景
table-bordered 帶邊框的
table-hover 滑鼠放上帶高亮的
table-condensed 緊湊型表格
下面是代碼示範
<!DOCTYPE html><html lang="zh-CN"> <head> <title>Browser Show</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="shortcut icon" href="images/jigsaw.png"> <!-- Bootstrap --> <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <table class="table table-striped"> <thead> <tr> <th>name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> </tbody> </table> <table class="table table-bordered"> <thead> <tr> <th>name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> </tbody> </table> <table class="table table-hover"> <thead> <tr> <th>name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> </tbody> </table> <table class="table table-condensed"> <thead> <tr> <th>name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> </tbody> </table> </div> </body></html>
BT3提供的表單可以讓輸入框圓角, 選中的時候會有藍色光暈等
<!DOCTYPE html><html lang="zh-CN"><head> <title>Browser Show</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="shortcut icon" href="images/jigsaw.png"> <!-- Bootstrap --> <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--></head><body> <div class="container"> <div class="row"> <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox">Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div></body></html>這裡注意的是.最好將輸入框放到form-group中 為了增強搜尋引擎的閱讀必須有label標籤 但是如何不讓其顯示可以添加.sr-only
水平排列的表單可以給form 添加form-horizontal類
可以通過input-lg input-sm控制輸入框的高度 寬度是利用網格系統col-md-xx 來控制的
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Enter email"> </div></form>
<div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div>按鈕
BT3提供了.7中按鈕的樣式 不同顏色 也提供4種按鈕的大小 其中一種是btn-block 這個意思就是 讓按鈕充滿整個行
請看代碼
<button type="button" class="btn">button</button> <button type="button" class="btn btn-primary btn-lg">button</button> <button type="button" class="btn btn-info btn-sm">button</button> <button type="button" class="btn btn-success btn-xs">button</button> <button type="button" class="btn btn-warning btn-block">button</button> <button type="button" class="btn btn-danger">button</button> <button type="button" class="btn btn-link">button</button>
study note
學習筆記怎做?
抄錯題，靠自己的回憶做一遍
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
