[UI] 04 - Bootstrap: layout & navigation

時間 2019-11-07

標籤 bootstrap layout navigation 欄目 Bootstarp 简体版

原文原文鏈接

前言

1、資源

From: http://www.imooc.com/code/2881jquery

Ref: http://www.runoob.com/try/bootstrap/layoutit/【拖拽佈局】bootstrap

本篇講得是：佈局組件。 ide

菜單、按鈕及導航組件

1、菜單

綜合示範

<body>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜單
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

    <li role="presentation" class="dropdown-header">第一部分菜單頭部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation" class="divider"></li>

    <li role="presentation" class="dropdown-header">第二部分菜單頭部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
  </ul>
</div> 
  <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>　　　　　　# ----> 註釋A
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

註釋A: 佈局

特別聲明：由於Bootstrap的組件交互效果都是依賴於jQuery庫寫的插件，網站

因此在使用bootstrap.min.js以前必定要先加載jquery.min.js 纔會生效果。 ui

item 按鍵狀態

  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active">  <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation">                 <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation">                 <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>

    <li role="presentation" class="divider"></li>

    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
  </ul>

按鈕等價效果

<body>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">按鈕下拉菜單項</a></li>
        <li><a href="##">按鈕下拉菜單項</a></li>
        <li><a href="##">按鈕下拉菜單項</a></li>
        <li><a href="##">按鈕下拉菜單項</a></li>
    </ul>
  </div>
  <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>

按鈕向上彈出菜單

<body>
<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">按鈕下拉菜單項</a></li>
        <li><a href="##">按鈕下拉菜單項</a></li>
        <li><a href="##">按鈕下拉菜單項</a></li>
        <li><a href="##">按鈕下拉菜單項</a></li>
    </ul>
</div>
  <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>

2、按鈕

一組按鍵

一排按鈕，具備彈性屬性。 spa

<div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>

幾組按鍵

<body>
<div class="btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
  </div>
</div>
<br />
<br />
<div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
  </div>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
  </div>
</div>

  <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>

View Code

嵌套分組

<body>
<div class="btn-group">　　# btn-group-vertical，　btn-group-justified
  <button class="btn btn-default" type="button">首頁</button>
  <button class="btn btn-default" type="button">產品展現</button>
  <button class="btn btn-default" type="button">案例分析</button>
  <button class="btn btn-default" type="button">聯繫咱們</button>

  <div class="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關於咱們<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">公司簡介</a></li>
        <li><a href="##">企業文化</a></li>
        <li><a href="##">組織結構</a></li>
        <li><a href="##">客服服務</a></li>
    </ul>
  </div>

</div>
  <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>

按鍵構成的導航效果：插件

3、導航

一級導航

<body>
<ul class="nav nav-tabs">　　　　　　＃ class="nav nav-pills nav-stacked/nav-justified"
    <li><a href="##">Home</a></li>
    <li><a href="##">CSS3</a></li>
    <li><a href="##">Sass</a></li>
    <li><a href="##">jQuery</a></li>
    <li class="disabled"><a href="##">Responsive</a></li>
</ul>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>

二級導航

<body>
<ul class="nav nav-pills">
  <li class="active"><a href="##">首頁</a></li>

  <li class="dropdown">
      <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
      </ul>
  </li>

  <li><a href="##">關於咱們</a></li>
</ul>
<br />

<script src="http://img.mukewang.com/down/53c6484f00013d9300000000.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>

連接導航

<body>
<!--代碼-->
<ol class="breadcrumb">
  <li><a href="#">首頁</a></li>
  <li><a href="#">個人書</a></li>
  <li class="active">《圖解CSS3》</li>
</ol> 

<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

此方法自帶了保留「點擊記錄(下劃線)「的效果。3d

導航條、分頁導航

1、典型導航條

典型案例

<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕課網</a>
  　</div>

    <ul class="nav navbar-nav">
      <li class="active"><a href="##">網站首頁</a></li>
      <li class="dropdown">
        <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
        </ul>
      </li>
      <li><a href="##">名師介紹</a></li>
      <li><a href="##">成功案例</a></li>
      <li><a href="##">關於咱們</a></li>
   </ul>
   <form action="##" class="navbar-form navbar-left" rol="search">
     <div class="form-group">
       <input type="text" class="form-control" placeholder="請輸入關鍵詞" />
     </div>
     <button type="submit" class="btn btn-default">搜索</button>
   </form>
</div>

文本＋連接 = 按鈕

也能夠是：點擊文本後進入連接，效果類似。code

<a href="##" class="navbar-text">Navbar Text</a>

」反色「風格

將navbar-deafult 類名換成 navbar-inverse。其變化只是導航條的背景色和文本作了修改。

2、固定導航條

重要的是，bottom導航會顯示在窗口底部，無論」下面「的正文有沒有。

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕課網</a>
  　</div>
     <ul class="nav navbar-nav">
         <li class="active"><a href="##">網站首頁</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名師介紹</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">關於咱們</a></li>
     </ul>
</div>
<div class="content">我是內容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕課網</a>
  　</div>
     <ul class="nav navbar-nav">
         <li class="active"><a href="##">網站首頁</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名師介紹</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">關於咱們</a></li>
     </ul>
</div> 
<p>網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容。</p>
<p>網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容。</p>
<p>網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容。</p>
<p>網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容，網頁正文內容。</p>

3、響應式導航條

保證在窄屏時須要摺疊的內容必須包裹在帶一個div內，

而且爲這個div加入collapse、navbar-collapse兩個類名。

最後爲這個div添加一個class類名或者id名。

<body>
<!--代碼-->
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　<!-- .navbar-toggle樣式用於toggle收縮的內容，即nav-collapse collapse樣式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         /* Jeff: 以上是彈出菜單的按鈕上的短橫線裝飾 */

       </button>
       <!-- 確保不管是寬屏仍是窄屏，navbar-brand都顯示 -->
       <a href="##" class="navbar-brand">慕課網</a>
  </div>
  <!-- 屏幕寬度小於768px時，div.navbar-responsive-collapse容器裏的內容都會隱藏，顯示icon-bar圖標，當點擊icon-bar圖標時，再展開。屏幕大於768px時，默認顯示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
       <ul class="nav navbar-nav">
          <li class="active"><a href="##">網站首頁</a></li>
          <li><a href="##">系列教程</a></li>
          <li><a href="##">名師介紹</a></li>
          <li><a href="##">成功案例</a></li>
          <li><a href="##">關於咱們</a></li>
       </ul>
  </div>
</div>

<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

4、分頁導航

<ul class="pagination pagination-lg">
<ul class="pagination pagination-sm">

導航條的 size。

<ul class="pagination pagination-lg">
  <li><a href="#">&laquo;第一頁</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最後一頁&raquo;</a></li>
</ul>

5、翻頁導航

<body>
<!--代碼-->
<ul class="pager">
  <li><a href="#">&laquo;上一頁</a></li>
  <li><a href="#">下一頁&raquo;</a></li>
</ul> 
<!--左右對齊-->
<ul class="pager">
  <li class="previous"><a href="#">&laquo;上一頁</a></li>
  <li class="next"><a href="#">下一頁&raquo;</a></li>
</ul> 
<!--禁止狀態-->
<ul class="pager">
  <li class="disabled"><span>&laquo;上一頁</span></li>
  <li><a href="#">下一頁&raquo;</a></li>
</ul>  
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

6、標籤

<body>
<!--代碼-->
<h3>Example heading <span class="label label-default">New</span></h3>  
<!--代碼-->
<span class="label label-default">默認標籤</span>
<span class="label label-primary">主要標籤</span>
<span class="label label-success">成功標籤</span>
<span class="label label-info">信息標籤</span>
<span class="label label-warning">警告標籤</span>
<span class="label label-danger">錯誤標籤</span> 
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

7、徽章

何爲徽章？

<body>
<!--代碼-->
<a href="#">Inbox <span class="badge">42</span></a> 
<!--navbar-default導航條勳章-->
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕課網</a>
  　</div>
    <ul class="nav navbar-nav">
         <li class="active"><a href="##">網站首頁</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名師介紹</a></li>
        <li><a href="##">成功案例<span class="badge">23</span></a></li>
        <li><a href="##">關於咱們</a></li>
    </ul>
</div>

<!--nav-pills導航條勳章-->
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br /> 
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
      <li class="active">
        <a href="#">
          <span class="badge pull-right">42</span> Home </a>
      </li>
      <li><a href="#">Profile</a></li>
      <li>
        <a href="#">
          <span class="badge pull-right">3</span> Messages </a>
      </li>
</ul>
<br />
<!--按鈕勳章-->
<button class="btn btn-primary" type="button"> Messages <span class="badge">4</span>
</button> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

相關標籤/搜索

bootstrap+bootstrap+scss

19.ui

Bootstarp

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。