前言

一、资源

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. ffmpeg for iOS

    链接: ios ffmpeg 实时视频压缩(主要是H264) 最简单的基于FFmpeg的移动端例子:IOS 视频转码器 iOS下使用FFMPEG的一些总结 iOS配置FFmpeg框架 iOS上使用高大 ...

  2. Linux的cron与%

    这个cron不能执行: * * * * * /bin/echo `/bin/date +"%Y-%m-%d-%T"` >> /home/adminuser/test.t ...

  3. Android NDK 使用自己的共享库（Import Module）

    LOCAL_PATH := $(call my-dir)//标准mk语句,指编译路径,所有mk文件第一句都是这个 /**这个模块表示引用了一个本地的静态库include $(CLEAR_VARS) / ...

  4. [Android Pro] 关于Android 7.0无法进行https抓包的问题

    cp from  : https://www.cnblogs.com/wytings/p/6954293.html 在App进行数据请求的时候,如果每次都打印log去判断是一件很不“人性化”的操作行为 ...

  5. Kubernetes命名空间

    本文环境为Kubernetes V1.11,操作系统版本为 CentOs 7.3,Kubernetes集群安装可以参考 kubeadm安装kubernetes V1.11.1 集群 1. 什么是Nam ...

  6. CentOS 7安装SSHFS 实现远程主机目录 挂载为本地目录

    安装sshfs 官方下载地址 https://github.com/libfuse/sshfs/releases 首先,我们需要安装sshfs软件.sshfs是一个基于SSH文件传输协议的文件系统客户 ...

  7. centos清除dns cache.

    # /etc/init.d/nscd restart # service nscd restart # service nscd reload # nscd -i hosts https://www. ...

  8. 浅谈压缩感知（二十四）：压缩感知重构算法之子空间追踪（SP）

    主要内容: SP的算法流程 SP的MATLAB实现 一维信号的实验与结果 测量数M与重构成功概率关系的实验与结果 SP与CoSaMP的性能比较 一.SP的算法流程 压缩采样匹配追踪(CoSaMP)与子 ...

  9. Swift 编程语言【转载+整理】

    原文地址 在过去的几年中,移动应用程序风靡全世界并且已经改变了我们使用互联网进行工作或者休闲的方式.为了创建移动应用程序,各种技术应运而生,同时开发过程也开始将其作为一等公民来对待.尽管移动似乎已经无 ...

  10. akka actors默认邮箱介绍

    1. UnboundedMailbox is the default unbounded MailboxType used by Akka Actors ”无界邮箱“ 是akka actors默认使用 ...