Web 開源 CSS 框架 Bootstrap 文件、Bootstrap 下載

2015-03-27    分類：CSS框架、Web應用開發、開源軟體0人評論發表於2015-03-27
WebCSS框架boot

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

Bootstrap是一款由Twitter推出的開源CSS框架，它的核心是由一系列用於Web前端開發的工具包組成。Bootstrap基於HTML、CSS和JavaScript，是一款非常適合敏捷Web開發的CSS框架，Bootstrap同時也是Github上最熱門的開源專案之一。

Bootstrap的特點

  • 強大的開發團隊。Bootstrap由Twitter的設計師Mark Otto和Jacob Thornton合作開發，Bootstrap開發團隊也是國際上公認最優秀的前端開發團隊之一。
  • 極簡的框架。Bootstrap的設計非常簡單，這就意味著，無論你是高階的前端設計師，還是普通的程式設計師，都能夠很快地掌握Bootstrap的開發流程和開發方式。
  • 跨裝置、跨瀏覽器最初設想的Bootstrap只支援現代瀏覽器，不過新版本已經能支援所有主流瀏覽器，甚至包括IE7。從Bootstrap 2開始，提供對平板和智慧手機的支援。
  • 完美的響應式設計。Bootstrap支援響應式佈局，可以智慧識別客戶端瀏覽器的型別，從而構造適應當前裝置前端佈局，這一切都是全自動的。
  • 支援HTML5和CSS3。Bootstrap支援所有的HTML5標籤和CSS3屬性。
  • 使用LESS構建動態樣式。當傳統的枯燥CSS寫法止步不前時，LESS技術橫空出世。LESS使用變數、巢狀、操作、混合編碼，幫助使用者花費很小的時間成本，編寫更快、更靈活的CSS。

Bootstrap元件

Bootstrap的強大之處在於擁有豐富的元件，我們可以利用這些現有的元件快速地搭建出自己想要的介面。這些元件包括導航、導航條、麵包屑、分頁、下拉選單、按鈕組、按鈕下拉選單、排版、縮圖、警告對話方塊、進度條等。

利用Bootstrap構建一個簡單的下拉選單導航

程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown with navbar example</title>
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3cschool</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
							<li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
	<script type="text/javascript" src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
	<script type="text/javascript" src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>

利用Bootstrap構建一個簡單的按鈕組合

程式碼：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 例項 - 巢狀的按鈕組</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group">
  <button type="button" class="btn btn-default">按鈕 1</button>
  <button type="button" class="btn btn-default">按鈕 2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      下列
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉鍊接 1</a></li>
      <li><a href="#">下拉鍊接 2</a></li>
    </ul>
  </div>
</div>

</body>
</html>

利用Bootstrap構建一個彩色的進度條

程式碼

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 例項 - 條紋的進度條</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress progress-striped">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 90%;">
      <span class="sr-only">90% 完成（成功）</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-info" role="progressbar"
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成（資訊）</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 20%;">
      <span class="sr-only">20% 完成（警告）</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-danger" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 10%;">
      <span class="sr-only">10% 完成（危險）</span>
   </div>
</div>

</body>
</html>

總結

除了上面的一些元件外，利用Bootstrap還可以非常輕鬆的構建一些網頁常用元件。如果你對Bootstrap感興趣，你也可以前往其官方網站了解更多資訊。

軟體首頁 軟體文件 軟體下載

本文連結：http://www.codeceo.com/article/bootstrap-web-css-framework.html
本文作者：碼農網 – 小峰
[ 原創作品，轉載必須在正文中標註並保留原文連結和作者等資訊。]

相關文章