乐趣区

关于javascript:前端框架BootStrsp的使用方法

jiezi

BootStrap

次要内容

BootStrap 的装置和应用

BootStrap 介绍

​ Bootstrap 是一套现成的 CSS 款式汇合（做得还是很敌对的）。是两个推特的员工干进去的。

​ Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、挪动设施优先的 WEB 我的项目。

​ 2011 年，twitter 的 ” 一小撮 ” 工程师为了进步他们外部的剖析和治理能力，用业余时间为他们的产品构建了一套易用、优雅、灵便、可扩大的前端工具集 – BootStrap。Bootstrap 由 MARK OTTO 和 Jacob Thornton 所设计和建设，在 github 上开源之后，迅速成为该站上最多人 watch&fork 的我的项目。大量工程师踊跃为该我的项目奉献代码，社区惊人地沉闷，代码版本进化十分疾速，官网文档品质极其高(能够说是优雅)，同时涌现了许多基于 Bootstrap 建设的网站：界面清爽、简洁; 因素排版利落慷慨。

​ Bootstrap 特地适宜那种没有设计师的团队（甚至说没有前端的团队），能够疾速的出一个网页。

BootStrap 特点

  1. 简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让 web 开发更速、简略。
  2. 基于 html5、css3 的 bootstrap，具备大量的迷人个性：敌对的学习曲线，卓越的兼容性，响应式设计，12 列格网，款式向导文档。
  3. 自定义 JQuery 插件，残缺的类库，bootstrap3 基于 Less，bootstrap4 基于 Sass 的 CSS 预处理技术
  4. Bootstrap 响应式布局设计, 让一个网站能够兼容不同分辨率的设施。Bootstrap 响应式布局设计，给用户提供更好的视觉应用体验。
  5. 丰盛的组件

下载与应用

  1. 下载
  2. 下载实现后

    拷贝 dist/css 中的 bootstrap.min.css 到我的项目 css 中

    拷贝 dist/js 中的 bootstrap.min.js 到我的项目的 js 中

  3. 下载 jquery.js
  4. 在 html 中模板为:
<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <!-- 应用 X -UA-Compatible 来设置 IE 浏览器兼容模式 最新的渲染模式 -->    
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!--
        viewport 示意用户是否能够缩放页面；width 指定视区的逻辑宽度；device-width 批示视区宽度应为设施的屏幕宽度；initial-scale 指令用于设置 Web 页面的初始缩放比例
        initial-scale= 1 则将显示未经缩放的 Web 文档
     -->
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Bootstrap 的 HTML 规范模板 </title>   
     <!-- 载入 Bootstrap 的 css -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
      <h1>Hello, world!</h1>     
      
    <!-- 如果要应用 Bootstrap 的 js 插件，必须先调入 jQuery -->
      <script src="js/jquery-3.4.1.js"></script>
      <!-- 包含所有 bootstrap 的 js 插件或者能够依据须要应用的 js 插件调用 -->
      <script src="js/bootstrap.min.js"></script> 
  </body>    
</html>

​ 留神：

​ 目前临时不应用 jquery 的插件 能够不必引入 js 文件, 这里是为了保障模板的完整性。

阐明：

  • viewport 标记用于指定用户是否能够缩放 Web 页面
  • width 和 height 指令别离指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字，要么是一个非凡的标记符号。
  • width 指令应用 device-width 标记能够批示视区宽度应为设施的屏幕宽度。
  • height 指令应用 device-height 标记批示视区高度为设施的屏幕高度。
  • initial-scale 指令用于设置 Web 页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差别。通常状况下设施会在浏览器中呈现出整个 Web 页面，设为 1.0 则将显示未经缩放的 Web 文档。

布局容器和栅格网格零碎

布局容器

​ 1、.container 类用于固定宽度并反对响应式布局的容器。

<div class="container">
  ...
</div>

​ 2、.container-fluid 类用于 100% 宽度，占据全副视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

栅格网格零碎

​ Bootstrap 提供了一套响应式、挪动设施优先的流式栅格零碎，随着屏幕或视口（viewport）尺寸的减少，零碎会主动分为最多 12 列。栅格零碎用于通过一系列的行（row）与列（column）的组合来创立页面布局，你的内容就能够放入这些创立好的布局中。

​ 网格零碎的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有平分成 24 份或 32 份，但 12 份是最常见的)，再调整内外边距，最初联合媒体查问，就制作出了弱小的响应式网格零碎。Bootstrap 框架中的网格零碎就是将容器平分成 12 份。

​ 留神: 网格零碎必须应用到 css

​ container、row、xs (xsmall phones)，sm (small tablets)，md (middle desktops)，lg (larger desktops) 即: 超小屏 (主动)，小屏(750px)，中屏(970px) 和大屏(1170px)

​ 数据行 (.row) 必须蕴含在容器（.container）中，以便为其赋予适合的对齐形式和内距(padding)。

​ 在行 (.row) 中能够增加列 (.column), 只有列（column）才能够作为行容器(.row) 的间接子元素，但列数之和不能超过平分的总列数，比方 12。如果大于 12, 则主动换到下一行。

​ 具体内容该当搁置在列容器（column）之内

<div class="container">
    <div class="row">
      <div class="col-md-4">4 列 </div>
      <div class="col-md-8">8 列 </div>
    </div>
</div>
列组合

​ 列组合简略了解就是更改数字来合并列（准则：列总和数不能超 12，大于 12, 则主动换到下一行。），有点相似于表格的 colspan 属性。

<div class="container">
    <div class="row">
        <div class="col-md-4">4 列 </div>
        <div class="col-md-8">8 列 </div>
    </div>
    <div class="row">
          <div class="col-md-2">2 列 </div>
          <div class="col-md-10">10 列 </div>
    </div>
</div>
列偏移

​ 如果咱们不心愿相邻的两个列紧靠在一起，但又不想应用 margin 或者其余的技术手段来。这个时候就能够应用列偏移（offset）性能来实现。应用列偏移也非常简单，只须要在列元素上增加类名 ”col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具备这个类名的列就会向右偏移。例如，你在列元素上增加 ”col-md-offset-8″，示意该列向右挪动 8 个列的宽度(要保障列与偏移列的总数不超过 12，不然会致列断行 | 换行显示)。

<div class="container">
    <div class="row">
          <div class="col-md-1">1 列 </div>
          <div class="col-md-1">2 列 </div>
          <div class="col-md-1 col-md-offset-8">11 列 </div>
          <div class="col-md-1">12 列 </div>
    </div>
</div>
列排序

​ 列排序其实就是扭转列的方向，就是扭转左右浮动，并且设置浮动的间隔。在 Bootstrap 框架的网格零碎中是通过增加类名 col-md-push- 和 col-md-pull- (其中星号代表挪动的列组合数)。往前 pull，往后 push。

<div class="container">
    <div class="row">
        <div class="col-md-1 col-md-push-10">1 列 </div>
        <div class="col-md-1 col-md-pull-1">2 列 </div>    
    </div>
</div>
列嵌套

​ Bootstrap 框架的网格零碎还反对列的嵌套。你能够在一个列中增加一个或者多个行（row）容器，而后在这个行容器中插入列.

<div class="container">
    <div class="row">
        <div class="col-md-2">
            我的外面嵌套了一个网格
            <div class="row">
                <div class="col-md-9">9</div>
                <div class="col-md-3">3</div>
            </div>
        </div>
        <div class="col-md-10"> 我的外面嵌套了一个网格
            <div class="row">
                <div class="col-md-10">10</div>
                <div class="col-md-2">2</div>
            </div>
        </div>                
    </div>
</div>

罕用款式

排版

题目

​ Bootstrap 和一般的 HTML 页面一样，定义题目都是应用标签

到
=

, 只不过 Bootstrap 笼罩了其默认的款式，应用其在所有浏览器下显示的成果一样。为了让非题目元素和题目应用雷同的款式，还特意定义了.h1~.h6 六个类名。同时前面能够紧跟着一行小的副标题或应用.small
<h1>h1. Bootstrap heading<small> 副标题 </small></h1>
<div class="h1">Bootstrap 题目 1 <span class="small"> 副标题 </span></div>
段落

​ 段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和 margin 也做相应的解决。能够应用以下标签给文本做突出款式解决：

​ : 小号字

​ : 加粗

​ : 斜体

<p class="lead"><small> 当前的 </small><b> 你 </b> 会 <i> 感激 </i> 当初 <em> 致力 </em> 的 <strong> 你 </strong></p>
强调

​ 定义了一套类名，这里称其为强调类名，这些强调类都是通过色彩来示意强调，具本阐明如下：

​ .text-muted：提醒，应用浅灰色（#999）

 .text-primary：次要，应用蓝色（#428bca）.text-success：胜利，应用浅绿色(#3c763d)

      .text-info：告诉信息，应用浅蓝色（#31708f）.text-warning：正告，应用黄色（#8a6d3b）.text-danger：危险，应用褐色（#a94442）
<div class="text-muted"> 提醒成果 </div>
<div class="text-primary"> 次要成果 </div>
<div class="text-success"> 胜利成果 </div>
<div class="text-info"> 信息成果 </div>
<div class="text-warning"> 正告成果 </div>
<div class="text-danger"> 危险成果 </div>
对齐成果

​ 在 CSS 中经常应用 text-align 来实现文本的对齐格调的设置。

​ 其中次要有四种格调：

​ 左对齐，取值 left ;

​ 居中对齐，取值 center;

​ 右对齐，取值 right ;

​ 两端对齐，取值 justify。

​ 为了简化操作，方便使用，Bootstrap 通过定义四个类名来管制文本的对齐格调：.text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐。

<p class="text-left"> 我居左 </p>
<p class="text-center"> 我居中 </p>
<p class="text-right"> 我居右 </p>
<p class="text-justify"> 网格零碎的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有平分成 24 份或 32 份，但 12 份是最常见的)，再调整内外边距，最初联合媒体查问，就制作出了弱小的响应式网格零碎。Bootstrap 框架中的网格零碎就是将容器平分成 12 份 </p>
列表

​ 在 HTML 文档中，列表构造次要有三种：

​ 无序列表(

  • …

)

​ 有序列表(

  1. …

)

​ 定义列表(

…

…

)

去点列表

​ class=“list-unstyled”

<ul class="list-unstyled">
    <li> 无序我的项目列表一 </li>
    <li> 无序我的项目列表二 </li>
</ul>
内联列表

​ class=“list-inline”，把垂直列表换成程度列表，而且去掉我的项目符号（编号），放弃程度显示。也能够说内联列表就是为制作程度导航而生。

<ul class="list-inline">
    <li> 首页 </li>
    <li>java 学院 </li>
    <li> 在线课堂 </li>
</ul>
定义列表

​ 在原有的根底退出了一些款式，应用款式 class=“dl-horizontal”制作程度定义列表 : 当题目宽度超过 160px 时，将会显示三个省略号。

<dl>
    <dt>HTML</dt>
    <dd> 超文本标记语言 </dd>
    <dt>CSS</dt>
    <dd> 层叠样式表是一种样式表语言 </dd>
</dl>
<dl class="dl-horizontal">
    <dt>HTML 超文本标记语言 </dt>
    <dd>HTML 称为超文本标记语言，是一种标识性的语言。</dd>           
    <dt> 测试题目不能超过 160px 的宽度, 否则 2 个点 </dt>
    <dd> 我在写一个程度定义列表的成果，我在写一个程度定义列表的成果。</dd>
</dl>
代码

​ 个别在集体博客上应用的较为频繁，用于显示代码的格调。在 Bootstrap 次要提供了三种代码格调：

​（1）应用来显示单行内联代码

​（2）应用

来显示多行块代码

​ 款式：pre-scrollable (height,max-height 高度固定, 为 340px, 超过存在滚动条)

​（3）应用来显示用户输出代码, 如快捷键

单行内联代码
<code>this is a simple code</code>
快捷键
<p> 应用 <kbd>ctrl+s</kbd> 保留 </p>
多行块代码
<!-- 代码会保留本来的格局，包含空格和换行 -->
<pre>
public class HelloWorld {public static void main(String[] args){System.out.println("helloworld...");
    }
}
</pre>
<!-- 
    显示 html 标签的代码须要适应字符实体  
    小于号（<）要应用硬编码“&lt;”来代替，大于号 (>) 应用“&gt;”来代替 
-->
<pre>
    &lt;ul&gt;
        &lt;li&gt; 测试实体符 &lt;/li&gt;
    &lt;/ul&gt;
</pre>
<!-- 当高度超过，会存在滚动条 -->
<pre class="pre-scrollable">
    <ol>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
    </ol>
</pre>
表格
表格款式

​ Bootstrap 为表格提供了 1 种根底款式和 4 种附加款式以及 1 个反对响应式的表格。在应用 Bootstrap 的表格过程中，只须要增加对应的类名就能够失去不同的表格格调：

​ 根底款式

​ 1）.table：根底表格

​ 附加款式

​ 1) .table-striped：斑马线表格

​ 2) .table-bordered：带边框的表格

​ 3) .table-hover：鼠标悬停高亮的表格

​ 4). table-condensed：紧凑型表格，单元格没内距或者内距较其余表格的内距小

tr、th、td 款式

​ 提供了五种不同的类名，每品种名管制了行的不同背景色彩

类

形容

实例

.active

将悬停的色彩利用在行或者单元格上

f5f5f5

.success

示意胜利的操作

dff0d8

.info

示意信息变动的操作

d9edf7

.warning

示意一个正告的操作

fcf8e3

.danger

示意一个危险的操作

f2dede

<table class="table table-bordered table-hover">
    <tr class="active">
        <th>JavaSE</th>
        <th> 数据库 </th>
        <th>JavaScript</th>
    </tr>
    <tr class="danger">
        <td> 面向对象 </td>
        <td>oracle</td>
        <td>json</td>
    </tr>
    <tr class="success">
        <td> 数组 </td>
        <td>mysql</td>
        <td>ajax</td>
    </tr>
</table>

表单

​ 表单次要性能是用来与用户做交换的一个网页控件，良好的表单设计可能让网页与用户更好的沟通。表单中常见的元素次要包含：文本输入框、下拉抉择框、单选按钮、复选按钮、文本域和按钮等。

表单控件

​ .form-control .input-lg（较大）.input-sm（较小）

输入框 text

​ .form-control

<div class="col-sm-3">
    <input type="text" name=""id="" class="form-control" />
    <input type="text" name=""id="" class="form-control input-lg" />
    <input type="text" name=""id="" class="form-control input-sm" />
</div>
下拉抉择框 select

​ 多行抉择设置：multiple=“multiple”

<div class="col-sm-3">
    <select class="form-control">
        <option> 北京 </option>
        <option> 上海 </option>
        <option> 深圳 </option>
    </select>
    <select class="form-control" multiple="multiple">
        <option> 北京 </option>
        <option> 上海 </option>
        <option> 深圳 </option>
    </select>
</div>
文本域 textarea
<div class="col-sm-3">
    <textarea class="form-control" rows="3"></textarea>
</div>
复选框 checkbox

​ 垂直显示：.checkbox

​ 程度显示：.checkbox-inline

<!-- 垂直显示 -->
<div>
    <div class="checkbox">
        <label><input type="checkbox" > 游戏 </label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" > 学习 </label>
    </div>
</div>
<!-- 程度显示 -->
<div>
    <label class="checkbox-inline">
        <input type="checkbox" > 游戏
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" > 学习
    </label>
</div>
单选框 radio

​ 垂直显示：.radio

​ 程度显示：.radio-inline

<!-- 垂直显示 -->
<div>
    <div class="radio">
        <label><input type="radio" > 男 </label>
    </div>
    <div class="radio">
        <label><input type="radio" > 女 </label>
    </div>
</div>
<!-- 程度显示 -->
<div>
    <label class="radio-inline">
        <input type="radio" > 男
    </label>
    <label class="radio-inline">
        <input type="radio" > 女
    </label>
</div>
按钮

1）应用 button 实现

​ 根底款式：btn

<button class="btn"> 按钮 </button>

​ 附加款式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

<button class="btn btn-danger"> 按钮 </button>
<button class="btn btn-primary"> 按钮 </button>
<button class="btn btn-info"> 按钮 </button>
<button class="btn btn-success"> 按钮 </button>
<button class="btn btn-default"> 按钮 </button>
<button class="btn btn-warning"> 按钮 </button>
<button class="btn btn-link"> 按钮 </button>

2）多标签反对：应用 a div 等制作按钮

<a href="##" class="btn btn-info">a 标签按钮 </a>
<span class="btn btn-success">span 标签按钮 </span>
<div class="btn btn-warning">div 标签按钮 </div>

3）按钮大小

​ 应用 .btn-lg、.btn-sm 或 .btn-xs 就能够取得不同尺寸的按钮

<button class="btn btn-primary btn-xs"> 超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm"> 小型按钮.btn-sm</button>
<button class="btn btn-primary"> 失常按钮 </button>
<button class="btn btn-primary btn-lg"> 大型按钮.btn-lg</button>

4）按钮禁用

​ 办法 1：在标签中增加 disabled 属性

<button class="btn btn-danger" disabled="disabled"> 禁用按钮 </button>

​ 办法 2：在元素标签中增加类名 ”disabled”

<button class="btn btn-danger disabled"> 禁用按钮 </button>

​ 在 class 属性中增加 disabled 只是款式上禁用了，并不是真正的禁用了此按钮！

表单布局

​ 根本的表单构造是 Bootstrap 自带的，个别的表单控件主动接管一些全局款式。上面列出了创立根本表单的步骤：

  • 向父 元素增加 _role=“form”_。
  • 把标签和控件放在一个带有 class .form-group 的

    中。这是获取最佳间距所必须的。

  • 向所有的文本元素、和 增加 class =“_form-control_”。
程度表单

​ 同一行显示 form-horizontal

​ 配合 Bootstrap 框架的网格零碎

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2"> 邮箱 </label>
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="请输出邮箱"/>
        </div>
    </div>
    <div class="form-group">
        <label for="pwd" class="control-label col-sm-2"> 明码 </label>
        <div class="col-sm-10">
            <input type="pwd" class="form-control" placeholder="请输出明码" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2">
            <div class="checkbox">
                <label>
                    <input type="checkbox" /> 记住明码
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default"> 提交 </button>
        </div>
    </div>
</form>
内联表单

​ 将表单的控件都在一行内显示 form-inline

​ 留神 label 不会显示，存在的意义：如果没有为输出控件设置 label 标签，屏幕阅读器将无奈正确辨认。

<form class="form-inline">
    <div class="form-group">
        <label for="email" > 邮箱 </label>
        <input type="email" class="form-control" placeholder="请输出邮箱"/>
    </div>
    <div class="form-group">
        <label for="pwd" > 明码 </label>
            <input type="pwd" class="form-control" placeholder="请输出明码" />
    </div>
    <div class="form-group checkbox">
        <label><input type="checkbox" /> 记住明码 </label>
    </div>
    <div class="form-group">
        <button class="btn btn-default"> 提交 </button>
    </div>
</form>

缩略图

​ 缩略图在电商类的网站很常见，最罕用的中央就是产品列表页面。缩略图的实现是配合网格零碎一起应用。同时还能够让缩略图配合题目、形容内容，按钮等。

<div class="container">
    <div class="row">
        <div class="col-md-3">
               <div class="thumbnail">
                   <img src="img/IMG_0131.JPG" alt="...">
                   <h3> 高圆圆 </h3>
                   <p> 出生于北京市，中国边疆影视女演员、模特。</p>
                   <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span> 喜爱 </button>
                   <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span> 评论
                </button>
               </div>
        </div>
    </div>
</div>

面板

​ 默认的 .panel 组件所做的只是设置根本的边框（border）和内补（padding）来蕴含内容。

​ .panel-default：默认款式

​ .panel-heading：面板头

​ .panel-body：面板主体内容

<div class="panel panel-success">
    <div class="panel-heading">
        ......
    </div>
    <div class="panel-body">
        ......
    </div>
</div>

BootStrap 插件

导航

​ 应用下拉与按钮组合能够制作导航

​ 要点:

1、根本款式: .nav 与“nav-tabs”、“nav-pills”组合制作导航
2、分类: 
    1)、标签型 (nav-tabs)导航
    2)、胶囊形 (nav-pills) 导航
    3)、堆栈 (nav-stacked) 导航
    4)、自适应 (nav-justified) 导航
    5)、面包屑式 (breadcrumb) 导航，独自应用款式，不与 nav 一起应用, 间接退出到 ol、ul 中即可，个别用于导航，次要是起的作用是通知用户当初所处页面的地位（以后地位）3、状态:
    1)、选中状态 active 款式
    2)、禁用状态: disable
4、二级菜单
标签式导航
<p> 标签式的导航菜单 </p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>
胶囊式导航
<p> 根本的胶囊式导航菜单 </p>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>

分页导航

​ 分页随处可见，分为页码导航和翻页导航

​ 页码导航：ul 标签上加 pagination [pagination-lg | pagination-sm]

​ 翻页导航：ul 标签上加 pager

分页
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>
翻页
<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

下拉菜单

​ 在应用 Bootstrap 框架的下拉菜单时，必须应用两个 js

<!-- 如果要应用 Bootstrap 的 js 插件，必须先调入 jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包含所有 bootstrap 的 js 插件或者能够依据须要应用的 js 插件调用 -->
<script src="js/bootstrap.min.js"></script>

​ 要点：

1、应用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框: 
   <div class="dropdown"></div>
2、默认向下 dropdown，向上弹起退出 . dropup 即可
3、应用 button 作为父菜单，应用类名: dropdown-toggle 和自定义 data-toggle 属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
4、在 button 中 应用 font 制作下拉箭头
    <span class="caret"></span>
5、下拉菜单项应用一个 ul 列表，并且定义一个类名为“dropdown-menu
6、分组分割线: <li> 增加类名“divider”来实现增加下拉分隔线的性能
7、分组题目: li 增加类名“dropdown-header”来实现分组的性能
8、对齐形式:
    1)、dropdown-menu-left  左对齐 默认款式
    2)、dropdown-menu-right   右对齐
9、激活状态（.active）和禁用状态（.disabled）
<!-- 应用一个类名为 dropdown, 默认向下 dropdown，向上弹起退出 . dropup 即可 -->
<div class="dropdown">
    <!-- 应用 button 作为父菜单，应用类名: dropdown-toggle 和自定义 data-toggle 属性 -->
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        喜爱频道 <span class="caret"></span><!-- 下拉箭头 -->
    </button>
    <!-- 下拉菜单项应用一个 ul 列表，并且定义一个类名为“dropdown-menu-->
    <ul class="dropdown-menu">     <!--dropdown-menu-right 右对齐 -->
        <!-- 分组题目: li 增加类名“dropdown-header”来实现分组的性能 -->
        <li class="dropdown-header">---- 科普 ----</li>
        <li>
            <a href="#"> 人与自然 </a>
        </li>
        <!-- 分组分割线: <li> 增加类名“divider”来实现增加下拉分隔线的性能 -->
        <li class="divider"></li>
        <li class="dropdown-header">---- 搞笑 ----</li>
        <li>
            <a href="#"> 欢畅悲剧人 </a>
        </li>
        <li>
            <a href="#"> 高兴大本营 </a>
        </li>
        <li class="divider"></li>
        <li class="disabled">    <!-- 禁用状态 -->
            <a href="#"> 生存大爆炸 </a>
        </li>
    </ul>
</div>

模态框

​ 模态框（Modal）是笼罩在父窗体上的子窗体。通常，目标是显示来自一个独自的源的内容，能够在不来到父窗体的状况下有一些互动。子窗体可提供信息、交互等。

用法
  1. 通过 data 属性：在控制器元素（比方按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target=”#identifier” 或 href=”#identifier” 来指定要切换的特定的模态框（带有 id=“identifier”）。
  2. 通过 JavaScript：应用这种技术，能够通过 JavaScript 来调用带有 id=“identifier”的模态框：
$('#identifier').modal(options);
实例
<h2> 创立模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    开始演示模态框
</button>
<!-- 模态框（Modal）-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）题目 </h4>
            </div>
            <div class="modal-body"> 在这里增加一些文本 </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> 敞开 </button>
                <button type="button" class="btn btn-primary"> 提交更改 </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
办法

办法

形容

实例

Toggle:.modal(‘toggle’)

手动切换模态框。

$('#identifier').modal('toggle');

Show:.modal(‘show’)

手动关上模态框。

$('#identifier').modal('show');

Hide:.modal(‘hide’)

手动暗藏模态框。

$('#identifier').modal('hide');

​

退出移动版