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

47次阅读

共计 15357 个字符,预计需要花费 39 分钟才能阅读完成。

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 文档中,列表构造次要有三种:

​ 无序列表(

)

​ 有序列表(

)

​ 定义列表(

)

去点列表

​ 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');

正文完
 0