前言

一、资源

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

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

本篇讲得是：布局组件。

菜单、按钮及导航组件

一、菜单

  • 综合示范
<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 才会生效果。

  • 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> 

二、按钮

  • 一组按键

一排按钮，具有弹性属性。

<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>

  • 嵌套分组
<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> 

按键构成的导航效果：

三、导航

  • 一级导航 
<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> 

此方法自带了保留 “点击记录(下划线)“ 的效果。

导航条、分页导航

一、典型导航条

  • 典型案例
<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>

  • 文本＋链接 = 按钮

也可以是：点击文本后进入链接，效果相似。

<a href="##" class="navbar-text">Navbar Text</a>
  • ”反色“ 风格 

将navbar-deafult 类名换成 navbar-inverse。其变化只是导航条的背景色和文本做了修改。

二、固定导航条

重要的是，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>

三、响应式导航条

保证在窄屏时需要折叠的内容必须包裹在带一个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>

四、分页导航

<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>  

五、翻页导航

<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>

六、标签

<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> 

七、徽章

何为徽章？

<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>

[UI] 04 - Bootstrap: layout & navigation的更多相关文章

  1. [Bootstrap] 6. Navigation

    Too Much Navigation? How many of Bootstrap's Navigation Components can we use on a page? 0 1 More th ...

  2. 【译】UI设计基础(UI Design Basics)--导航(Navigation)(六)

    [译]UI设计基础(UI Design Basics)--导航(Navigation)(六)

  3. amaze ui和bootstrap有哪些差别？

    amaze ui和bootstrap有哪些差别? 问题 我最近在学amaze ui,感觉如果单从功能性来看和bootstrap最大差别也就是扁平化,不过妹子ui号称对国产本土化支持更好,这个具体表现在 ...

  4. jQuery UI 之 Bootstrap 快速入门

    转载自(http://www.shouce.ren/example/show/s/6444) 1. 下载 这个页面是用来展示 jQuery UI Bootstrap 项目的 -- 我们将 Bootst ...

  5. Dojo的UI框架bootstrap for dojo和Dojo-Bootstrap简介

    最近在学习Dojo,但样式问题真是头疼呀,虽然清新的淡蓝色很是减缓眼睛的疲劳,但这个扁平化简约风盛行的年代,光是清新的拟物已经满足不了群众的需求了,所以就在这样的需求下,我知道了bootstrap f ...

  6. 【Android UI】Android Layout XML属性

    Layout对于迅速的搭建界面和提高界面在不同分辨率的屏幕上的适应性具有很大的作用.这里简要介绍Android的Layout和研究一下它的实现. Android有Layout:FrameLayout, ...

  7. Unity3D 使用 UI 的 Grid Layout Group 组件。

    1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...

  8. [UI] 03 - Bootstrap: component

    前言 一.框架体系 Bootstrap 是基于 HTML5.CSS3.JAVASCRIPT. 教程被分为: Bootstrap 基本结构. Bootstrap CSS. Bootstrap 布局组件 ...

  9. [UI] 05 - Bootstrap: built-in components

    前言 一.资源 From: http://www.imooc.com/code/3777 内置组件 一.缩略图 <div class="col-xs-6 col-md-3"& ...

随机推荐

  1. 体验jQuery和AngularJS的不同点以及AngularJS的迷人之处

    本篇通过jQuery和Angular两种方式来实现同一个实例,从而体验两者的不同点以及AngularJS的迷人之处. 首先当然需要引用jquery.js和angular.js文件. ■ 使用jQuer ...

  2. AngularJS自定义Directive中link和controller的区别

    在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能.那么,两者有什么区别呢? 使用link函数的Directive 页面大致是: <b ...

  3. AngularJS中Scope间通讯Demo

    在AngularJS中,每一个controller都有对应的Scope,而Scope间有时候需要通讯.比如有如下的一个controller嵌套: <body ng-controller=&quo ...

  4. android:应用性能优化SparseArray

    HashMap是java里比较常用的一个集合类,我比较习惯用来缓存一些处理后的结果.最近在做一个Android项目,在代码中定义这样一个变量,实例化时,Eclipse却给出了一个 performanc ...

  5. The system is running in low-graphics mode UB16

    1.Ctrl+ALT+F1 进入控制台 2.输入用户名和密码进入系统 3.输入以下命令: cd /etc/X11 sudo cp xorg.conf.failsafe xorg.conf sudo r ...

  6. yolov3源码darknet在vscode下调试

    1. 安装配置: https://pjreddie.com/darknet/yolo/ darknet文件夹下make命令搞定: 2. 配置vscode 打开安装好的vscode并安装扩展C/C++( ...

  7. Java Arrays.sort源代码解析

    前提: 当用到scala的sortWith,发现: def sortWith(lt: (A, A) ⇒ Boolean): List[A] // A为列表元素类型 根据指定比较函数lt进行排序,且排序 ...

  8. 用命令让vbox的虚拟硬盘文件转换成vmware的vmdk

    VirtualBox的生成备份功能只是个系统还原点 这个生成备份功能备份速度非常快,其实它并不是备份,而是相当于xp系统中的建立系统还原点.但是要注意的是如果你的虚拟硬盘文件(***.vdi)在别的V ...

  9. 保持APP后台NSTimer运行

    [[UIApplication sharedApplication] beginBackgroundTaskWithExpirationHandler:nil]; self.timer = [NSTi ...

  10. 大型互联网架构概述 关于架构的架构目标 典型实现 DNS CDN LB WEB APP SOA MQ CACHE STORAGE

    大型互联网架构概述 目录 架构目标 典型实现 DNS CDN LB WEB APP SOA MQ CACHE STORAGE 本文旨在简单介绍大型互联网的架构和核心组件实现原理. 理论上讲,从安装配置 ...