bootstrap的示例分析-創新互聯

這篇文章給大家分享的是有關bootstrap的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

專注于為中小企業提供成都網站設計、網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業齊齊哈爾免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了上千多家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

bootstrap提供了三種類型的下載：

1、用于生產環境的 Bootstrap

編譯并壓縮后的 CSS、JavaScript 和字體文件。不包含文檔和源碼文件。

2、Bootstrap 源碼

Less、JavaScript 和字體文件的源碼，并且帶有文檔。需要 Less 編譯器和一些設置工作。

3、Sass

這是 Bootstrap 從 Less 到 Sass 的源碼移植項目，用于快速地在 Rails、Compass 或只針對 Sass 的項目中引入。

其實我們不用下載bootstrap也可以使用它：

Bootstrap 中文網為 Bootstrap 專門構建了自己的免費 CDN 加速服務。基于國內云廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。

base.html

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="external nofollow" >
 
 </head>
 <body>
 <h2>你好，bootstrap！</h2>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
</html>

base.html中已經引入了bootstrap，將其保存，我們就可以使用bootstrap提供的樣式了。

字體圖標

bootstrap默認提供了二百多個圖標。我們可以通過span標簽來使用這些圖標：

 <h4>圖標</h4> 
 <span class="glyphicon glyphicon-home"></span>
 <span class="glyphicon glyphicon-signal"></span>
 <span class="glyphicon glyphicon-cog"></span>
 <span class="glyphicon glyphicon-apple"></span>
 <span class="glyphicon glyphicon-trash"></span>
 <span class="glyphicon glyphicon-play-circle"></span>
 <span class="glyphicon glyphicon-headphones"></span>

bootstrap的示例分析

按鈕

<button></button>標簽用于創建按鈕，bootstrap提供了豐富的按鈕樣式。

 <h4>按鈕</h4>
 <button type="button" class="btn btn-default">按鈕</button>
 <button type="button" class="btn btn-primary">primary</button>
 <button type="button" class="btn btn-success">success</button>
 <button type="button" class="btn btn-info">info</button>
 <button type="button" class="btn btn-warning">warning</button>
 <button type="button" class="btn btn-danger">danger</button>
 
 <h4>按鈕尺寸</h4>
 <button type="button" class="btn btn-default">按鈕</button>
 <button type="button" class="btn btn-primary btn-lg">primary</button>
 <button type="button" class="btn btn-success btn-sm">success</button>
 <button type="button" class="btn btn-info btn-xs">info</button>

 <h4>把圖標顯示在按鈕里</h4>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;按鈕</button>

按鈕除了有默認的大小外，bootstrap還提供三個參數來調整按鈕的大小，分別是：btn-lg、btn-sm和btn-xs。

bootstrap的示例分析

下拉菜單

下拉菜單是最常見的交互之一，bootstrap提供了漂亮的樣式。

  <h4>下拉菜單</h4>
 <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
  </ul>
 </div>

bootstrap的示例分析

輸入框

通過<input></input>標簽去創建輸入框。

 <h4>輸入框</h4>
 <div class="input-group">
  <span class="glyphicon glyphicon-user"></span>
  <input type="text" placeholder="username">
 </div>

 <div class="input-group">
  <span class="glyphicon glyphicon-lock"></span>
  <input type="password" placeholder="password">
 </div>

bootstrap的示例分析

導航欄

導航欄作為整個網站的指引必不可少。

 <h4>導航欄</h4>
 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
   <li><a href="#about" rel="external nofollow" >About</a></li>
   <li><a href="#contact" rel="external nofollow" >Contact</a></li>
   <li class="dropdown">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">Nav header</li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
    </ul>
   </li>
   </ul>
  </div><!--/.nav-collapse -->
  </div>
 </nav>

bootstrap的示例分析

表單

人與系統之間數據的傳遞都需要依靠表單來完成。比如注冊/登錄信息的提交，查詢條件的提交等。用<form></form>標簽來創建表單。

 <h4>表單</h4>
 <form>
 <div class="form-group">
  <span class="glyphicon glyphicon-user"></span>
  <input type="email" id="exampleInputEmail1" placeholder="Enter email">
 </div>
 <div class="form-group">
  <span class="glyphicon glyphicon-lock"></span>
  <input type="password" 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>

bootstrap的示例分析

警告框

警告框是系統向用戶傳達信息和提供指引的重要手段。沒有針對警告框的標簽，通過bootstrap所提供的樣式可以瞬間制作出漂亮的警告框。

 <h4>警告框</h4>
 <div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </div>
 <div class="alert alert-success" role="alert">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">success!</a>
 </div>
 <div class="alert alert-info" role="alert">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">info!</a>
 </div>
 <div class="alert alert-warning" role="alert">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">warning!</a>
 </div>
 <div class="alert alert-danger" role="alert">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">danger!</a>
 </div>

bootstrap的示例分析

進度條

系統的處理過程往往需要用戶等待，進度條可以讓用戶感知到系統的處理過程，從而增加容忍度。

 <h4>進度條</h4>
 <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" >
  70%
  </div>
 </div>

bootstrap的示例分析

感謝各位的閱讀！關于“bootstrap的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創新互聯建站m.kartarina.com，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文標題：bootstrap的示例分析-創新互聯
文章位置：http://m.kartarina.com/article28/eoijp.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、ChatGPT、品牌網站制作、微信小程序、網站建設、手機網站建設

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容