[UI] 04 - Bootstrap: layout & navigation

前言

一、资源

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的更多相关文章

[Bootstrap] 6. Navigation
Too Much Navigation? How many of Bootstrap's Navigation Components can we use on a page? 0 1 More th ...
【译】UI设计基础(UI Design Basics)--导航(Navigation)(六)
[译]UI设计基础(UI Design Basics)--导航(Navigation)(六)
amaze ui和bootstrap有哪些差别？
amaze ui和bootstrap有哪些差别? 问题我最近在学amaze ui,感觉如果单从功能性来看和bootstrap最大差别也就是扁平化,不过妹子ui号称对国产本土化支持更好,这个具体表现在 ...
jQuery UI 之 Bootstrap 快速入门
转载自(http://www.shouce.ren/example/show/s/6444) 1. 下载这个页面是用来展示 jQuery UI Bootstrap 项目的 -- 我们将 Bootst ...
Dojo的UI框架bootstrap for dojo和Dojo-Bootstrap简介
最近在学习Dojo,但样式问题真是头疼呀,虽然清新的淡蓝色很是减缓眼睛的疲劳,但这个扁平化简约风盛行的年代,光是清新的拟物已经满足不了群众的需求了,所以就在这样的需求下,我知道了bootstrap f ...
【Android UI】Android Layout XML属性
Layout对于迅速的搭建界面和提高界面在不同分辨率的屏幕上的适应性具有很大的作用.这里简要介绍Android的Layout和研究一下它的实现. Android有Layout:FrameLayout, ...
Unity3D 使用 UI 的 Grid Layout Group 组件。
1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...
[UI] 03 - Bootstrap: component
前言一.框架体系 Bootstrap 是基于 HTML5.CSS3.JAVASCRIPT. 教程被分为: Bootstrap 基本结构. Bootstrap CSS. Bootstrap 布局组件 ...
[UI] 05 - Bootstrap: built-in components
前言一.资源 From: http://www.imooc.com/code/3777 内置组件一.缩略图 <div class="col-xs-6 col-md-3"& ...

随机推荐

ELASTIC索引监控脚本
报警方式自定义,我这里用的zabbix调用脚本监控 #!/bin/bash #power by kerwin #监控任意索引数据导入情况,若20分钟内无数据,报警触发 #使用方式,给脚本传索引名字的参 ...
react Immutability 理解
在开发过程中经常会遇到state里有数组和对象的情况,比如当用splice去改变数组再调用setState更新的时候,会发现并没有生效,这是因为react里的state是Immutability(不可 ...
Unity中巧用协程和游戏对象的生命周期处理游戏重启的问题
主要用到协程(Coroutines)和游戏对象的生命周期(GameObject Lifecycle)基础知识,巧妙解决了游戏重启的问题. 关于协程,这里有篇文章我觉得写的非常好,理解起来也很容易.推荐 ...
NSArray与NSString、NSData，NSDictionary与NSString、NSData 相互转化
NSArray *array = @[ @1, @2, @3, @4, @5, @3 ]; // 1. NSArray与NSData相互转化 // NSArray to NSData NSError ...
连接mysql 出现：java.sql.SQLException: Unable to load authentication plugin 'caching_sha2_password'.
数据测试的时候出现: 网上查资料说的是mysql5.x 版本和 8.x版本的区别: 5.7版本是:default_authentication_plugin=mysql_native_password ...
PostgreSQL之时间戳自动更新
操作系统 :CentOS7.3.1611_x64 PostgreSQL版本 :9.6 问题描述 PostgreSQL执行Insert语句时,自动填入时间的功能可以在创建表时实现,但更新表时时间戳不会自 ...
Notes中几个处理多值域的通用函数
1.查找出查找内容在多值域中的索引值 getItemIndex(域名,域值,文档) Public Function getItemIndex(ByVal fieldName As String, By ...
void android.graphics.Bitmap.recycle()
void android.graphics.Bitmap.recycle() Free up the memory associated with this bitmap's pixels, and ...
Uber使用Swift重写APP的踩坑经历及解决方案（转载）
本文出自Uber移动架构和框架组负责人托马斯·阿特曼于2016年在湾区Swift峰会上的演讲,分享了使用Swfit重写Uber的好与坏.以下为译文: 我是托马斯·阿特曼,目前是Uber移动架构和框架组 ...
Swift Assert 断言
前言对每次运行都会出现的错误通常不会过于苦恼,可以使用断点调试或者 try catch 之类的方式判断并修复它.但是一些偶发(甚至是无数次运行才会出现一次)的错误单靠断点之类的方式是很难排除掉的,为 ...