前言

一、资源

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. Mac如何找到从AppStore下载的正版Xcode安装包、以及Xcode清理缓存

    前言:本文介绍在Mac下如何找到AppStore下载的安装包路径,以及如何提取出来供以后使用,希望对大家有所帮助(前提:想要提取某个安装包,前提是你正在从AppStore安装这个程序.比如你想提取im ...

  2. iOS: 数据持久化方案

    数据持久化方案(如果总结不到位,或者有误的地方,敬请斧正) 一.功能: 主要是将数据持久化到本地,减少对网络请求的次数,既节省了用户的流量,也增强了App的体验效果. 二.种类:  plist存储:使 ...

  3. EditText自动换行显示内容

    默认的EditText是不会自动换行的,通过代码来实现: [java] view plain copy EditText editText = new EditText(this); //设置Edit ...

  4. 每天一个linux命令(3):ls命令

    1.命令简介 ls(list 列出目录内容)命令用来列出显示指定目录里的文件及文件夹清单,缺省下ls用来打印出当前目录的清单.通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文件权限 ...

  5. 〖Java〗Eclispe安装和使用viplugin

    习惯了VIM的操作,每次打开Eclipse都习惯性的按下 hjkl: 感觉蛋疼了使用一下VIPlugin,发现给编码速度造成了成吨的伤害- 这个插件对于习惯于使用VIM的程序员来说,简直太有必要了.. ...

  6. 【PMP】项目浮动的三种时间

    自由浮动时间 不影响后续工作最早可以开始时间的前提下,这项工作可以拖延的时间叫做自由浮动时间. 总浮动时间 不影响项目总工期的情况下活动可以拖延的总时间. 项目浮动时间 在已经排好的总工期的基础上,领 ...

  7. syslog之三：建立Windows下面的syslog日志服务器

    目录: <syslog之一:Linux syslog日志系统详解> <syslog之二:syslog协议及rsyslog服务全解析> <syslog之三:建立Window ...

  8. MemoryFile偷取安卓内存

    参考链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0111/3859.html MemoryFile memoryFile ...

  9. Socket网络编程--小小网盘程序(2)

    这一节将不会介绍太多的技术的问题,这节主要是搭建一个小小的框架,为了方便接下来的继续编写扩展程序.本次会在上一小节的基础上加上一个身份验证的功能. 因为网盘程序不像聊天程序,网盘是属于主动向服务器拉取 ...

  10. 【Netty】通俗地讲，Netty 能做什么？

    作者:郭无心链接:https://www.zhihu.com/question/24322387/answer/78947405来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...