第二次學習bootstrap了，這次主要以實際用例為主，做一下總結。
51CTO課程連結:BootStrap零基礎學習實戰視頻課程
Bootstrap官方文檔 1. 登陸表單
在bootstrap中，大量使用div標籤控制層級關係，使用class屬性控制樣式表現。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登陸</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container"> <h1 class="page-header">使用者登入</h1> <form action="#" method="post" class="form-horizontal"> <div class="form-group"> <div class="col-md-5"> <div class="input-group"> <div class="input-group-addon">郵箱</div> <input type="text" class="form-control" placeholder="Email"/> </div> </div> </div> <div class="form-group"> <div class="col-md-5"> <div class="input-group"> <div class="input-group-addon">密碼</div> <input type="password" class="form-control" placeholder="PassWord"/> </div> </div> </div> <div class="form-group"> <div class="col-md-5"> <a class="btn btn-primary" href="#">登陸</a> </div> </div> </form> </div> </body></html>2. 基本導覽列
<nav class="nav navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class="navbar-brand">Logo</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">科技</a></li> </ul> <div class="navbar-form navbar-right"> <a href="#" class="btn btn-default">登陸</a> <a href="#" class="btn btn-default">註冊</a> <input class="form-control" type="text" placeholder="請輸入關鍵字"/> <button class="btn btn-primary">搜尋</button> </div> </div></nav>3. 字形表徵圖庫
Bootstrap包含了非常多的表徵圖供我們使用，可以查看：http://v3.bootcss.com/components/#glyphicons
要注意盡量在表徵圖和文字之間插入一個空格。
<h1><span class="glyphicon glyphicon-home"></span> 使用者登入</h1>4. 可下拉式功能表
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉式功能表 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">選項1</a></li> <li><a href="#">選項2</a></li> <li class="divider"></li> <li><a href="#">選項3</a></li> </ul></li>5. 利用網格系統展示相簿
bootstrap的網格系統非常強大，可以自由組合多重元素並控制位置。
<div class="container"> <div class="row"> <div class="col-md-3"> <div class="thumbnail"> <img src="img/green.png" /> <div class="caption"> <h4>圖片1</h4> <p>美麗的風景</p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/green.png" /> <div class="caption"> <h4>圖片2</h4> <p>美麗的風景</p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/green.png" /> <div class="caption"> <h4>圖片3</h4> <p>美麗的風景</p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/green.png" /> <div class="caption"> <h4>圖片4</h4> <p>美麗的風景</p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/green.png" /> <div class="caption"> <h4>圖片5</h4> <p>美麗的風景</p> </div> </div> </div> </div></div>6. 麵包屑導航條
麵包屑導航的作用就是告訴訪問者他們目前在網站中的位置以及如何返回，在bootstrap中製作導航條非常簡單。
<div class="col-md-12"> <ul class="breadcrumb"> <li><a href="#">網站首頁</a></li> <li><a href="#">圖片</a></li> <li><a href="#" class="text-muted">所有圖片</a></li> </ul></div>7. Tab標籤
<div class="row"> <div class="col-md-6"> <ul class="nav nav-tabs"> <li class="active"><a href="#page1" data-toggle="tab">頁面1</a></li> <li><a href="#page2" data-toggle="tab">頁面2</a></li> <li><a href="#page3" data-toggle="tab">頁面3</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade in active" id="page1"> <p></p> <p>生活，沒有什麼大道理可言，過日子，就是一種心情. </p> <p>或許，傾心已久的人就在你舉目可見的地方，卻不一定是在等你； </p> <p>或許，付出努力和艱苦後，你的鈔票並不會乖乖地躲進你的腰包裡； </p> <p>或許，積年累月地尋找著突破事業的視窗，現實卻並不成全你； </p> <p>或許，…… </p> </div> <div class="tab-pane fade" id="page2"> <p></p> <p>生活，沒有什麼大道理可言，過日子，就是一種心情. </p> <p>或許，傾心已久的人就在你舉目可見的地方，卻不一定是在等你； </p> <p>或許，付出努力和艱苦後，你的鈔票並不會乖乖地躲進你的腰包裡； </p> <p>或許，積年累月地尋找著突破事業的視窗，現實卻並不成全你； </p> </div> <div class="tab-pane fade" id="page3"> <p></p> <p>生活，沒有什麼大道理可言，過日子，就是一種心情. </p> <p>或許，傾心已久的人就在你舉目可見的地方，卻不一定是在等你； </p> <p>或許，付出努力和艱苦後，你的鈔票並不會乖乖地躲進你的腰包裡； </p> </div
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
