[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"& ...

随机推荐

喵哈哈村的魔法考试 Round #19 (Div.2) 题解
题解: 喵哈哈村的魔力源泉(1) 题解:签到题. 代码: #include<bits/stdc++.h> using namespace std; int main(){ long lon ...
[Visual Studio] 自定义类模板
1.找到vs2015/vs2012/vs2017的安装目录下:Common7\IDE\ItemTemplates\CSharp\Code\2052\Class 2.打开Class.cs文件 using ...
Docker网络模式说明
现在的Docker版本不推荐继续使用Link了,而是推荐用网络模式解决问题,简单讲一下最常用的几个网络模式,其他我用到时候再补充. bridge -net不加参数就是默认的bridge模式,这个默认b ...
CentOS 7下简单的Ansible使用入门
1.配置hosts文件,Ansible依赖hosts文件进行主机通讯,不能直接在命令行上直接输入IP. vi /etc/ansible/hosts hosts文件格式如下: [servers] hos ...
java工具类,在Windows,Linux系统获取电脑的MAC地址、本地IP、电脑名
package com.cloudssaas.util; import java.io.BufferedReader; import java.io.IOException; import java. ...
How determine the RC time constant in PWM DAC low-pass filter?
how determine the RC time constant in PWM digital to analog low-pass filter? I 'm looking for the be ...
【docker】docker部署spring boot服务，但是docker logs查看容器输出控制台日志，没有日志打印，日志未打印，docker logs不打印容器日志
如题: docker部署spring boot服务,但是docker logs查看容器输出控制台日志,没有日志打印,日志未打印,docker logs不打印容器日志场景再现: docker部署并启动 ...
Java 8 学习资料汇总【转载】
原文地址 2014年3月18日,Java SE 8 发布,而 Java 9 预期2016年发布: 2011年7月7日,Java 7 发布,是2009年4月20日被Oracle 以74亿美元收购首次推出 ...
shell编程学习笔记（一）：编写我的第一段代码
目前在学习Shell编程,我会把我的学习笔记记录在这里.大神可以直接略过~ 嗯,第一段代码,肯定是要输出Hello World了~ 以下蓝色字体的内容为linux命令,红色字体的内容为输出的内容: # ...
Can't get Kerberos realm
1. Can't get Kerberos realm 原因分析: 原始代码为: org.apache.hadoop.security.UserGroupInformation.setConfigur ...