typora-root-url: images
typora-copy-images-to: images
BootStrap
main content
Installation and use of BootStrap
Introduction to BootStrap
Official website: http://getbootstrap.com/
Chinese website: http://www.bootcss.com/
Bootstrap is a set of ready-made CSS styles (still very friendly). It was done by two Twitter employees.
Bootstrap is the most popular HTML, CSS and JS framework for the development of responsive layout, mobile device-first WEB projects.
In 2011, in order to improve their internal analysis and management capabilities, a small group of Twitter engineers used their spare time to build an easy-to-use, elegant, flexible, and extensible front-end tool set - BootStrap for their products. Bootstrap was designed and built by MARK OTTO and Jacob Thornton. After being open sourced on github, it quickly became the most watch&fork project on the site. A large number of engineers actively contribute code to the project, the community is surprisingly active, the code version evolves very fast, the quality of official documents is extremely high (it can be said to be elegant), and many websites based on Bootstrap have emerged: the interface is fresh and concise; the elements are neatly typed generous.
Bootstrap is especially suitable for teams without designers (or even teams without front-end), which can quickly produce a web page.
BootStrap features
- Concise, intuitive, and powerful front-end development framework, html, css, javascript tool set, make web development faster and simpler.
- Bootstrap based on html5 and css3 has a lot of attractive features: friendly learning curve, excellent compatibility, responsive design, 12-column grid, style guide document.
- Custom JQuery plug-in, complete class library, bootstrap3 based on Less, bootstrap4 based on Sass CSS preprocessing technology
- Bootstrap responsive layout design allows a website to be compatible with devices of different resolutions. Bootstrap responsive layout design provides users with a better visual experience.
- Rich components
Download and use
-
Download: http://v3.bootcss.com/getting-started/
-
After the download is complete
Copy bootstrap.min.css in dist/css to the project css
Copy bootstrap.min.js in dist/js to the js of the project
-
Download jquery.js
- The template in html is:
<!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> Note:
<font color="red">Currently, plugins that don’t use jquery don’t need to import js files. This is to ensure the integrity of the template. </font>
Description:
- The viewport <meta> tag is used to specify whether the user can zoom the Web page
- The width and height instructions specify the logical width and height of the viewport, respectively. Their value is either a number in pixels or a special mark symbol.
- The width instruction uses the device-width tag to indicate that the width of the viewport should be the screen width of the device.
- The height instruction uses the device-height tag to indicate that the height of the viewport is the screen height of the device.
- The initial-scale command is used to set the initial scale of the Web page. The default initial zoom value varies depending on the smartphone browser. Under normal circumstances, the device will present the entire web page in the browser, set to 1.0 will display the unscaled web document.
-
Reference API
Layout container and grid grid system
Layout container
1. The .container class is used for containers with fixed width and support for responsive layout.
```php+HTML
<div class="container">
...
</div>
2、.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。
```html
<div class="container-fluid">
...
</div>Grid grid system
Bootstrap provides a responsive, mobile device-first streaming grid system. As the screen or viewport size increases, the system will automatically be divided into up to 12 columns. The grid system is used to create page layouts through a series of row and column combinations, and your content can be placed in these created layouts.
The implementation principle of the grid system is very simple, just by defining the size of the container, dividing it into 12 (there are also 24 or 32, but 12 is the most common), then adjust the inner and outer margins, and finally combine the media query, It produced a powerful responsive grid system. The grid system in the Bootstrap framework divides the container into 12 equal parts.
Note: The grid system must use css
Container, row, xs (xsmall phones), sm (small tablets), md (middle desktops), lg (larger desktops) namely: ultra-small screen (automatic), small screen (750px), medium screen (970px) and large Screen (1170px)
The data row (.row) must be contained in the container (.container) in order to give it the appropriate alignment and padding.
Column (.column) can be added to the row (.row), only column (column) can be used as a direct child element of the row container (.row), but the sum of the number of columns cannot exceed the total number of columns equally divided, such as 12 . If it is greater than 12, it will automatically switch to the next line.
The specific content should be placed in the column container (column)
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
</div>
Column combination
A simple understanding of column combination is to change the number to merge the columns (principle: the total number of columns cannot exceed 12, more than 12, it will automatically switch to the next row.), somewhat similar to the colspan attribute of the table.
<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>Column offset
If we do not want two adjacent columns to be close together, but do not want to use margin or other technical means. At this time, you can use the column offset function to achieve. Using the column offset is also very simple, just add the class name "col-md-offset-*" (where the asterisk represents the number of column combinations to be offset) on the column element, then the column with this class name will be Offset right. For example, if you add "col-md-offset-8" to the column element, it means that the column is moved to the right by the width of 8 columns (make sure that the total number of columns and offset columns does not exceed 12, otherwise the column will break|wrap display).
<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>Column sort
Column sorting is actually to change the direction of the column, that is, to change the left and right floating, and set the floating distance. In the grid system of the Bootstrap framework, the class names col-md-push- and col-md-pull- are added (where the asterisk represents the number of column combinations moved). Pull forward and push backward.
<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>Column nesting
The grid system of the Bootstrap framework also supports column nesting. You can add one or more row containers to a column, and then insert columns in this row container.
<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>Common style
typesetting
title
Bootstrap is the same as an ordinary HTML page. The definition of the title uses the tags <h1> to <h6>, but Bootstrap covers its default style, and uses it to display the same effect in all browsers. In order to make non-heading elements and headings use the same style, six class names from .h1 to .h6 are also specifically defined. At the same time, it can be followed by a line of small subtitles <small></small> or use .small
<h1>h1. Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>paragraph
Paragraph is another important element in typesetting. Use .lead to emphasize the content (its role is to increase the text size, bold the text, and also deal with the line height and margin accordingly. You can use the following tags to make the text prominent:
<small>: Small font
<b><strong>: bold
<i><em>:斜体
<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>Emphasize
Defines a set of class names, which are called emphasized class names here. These emphasized classes are emphasized by color. The instructions are as follows:
.text-muted: hint, use light gray (#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>Alignment effect
In CSS, text-align is often used to set the alignment style of the text.
There are mainly four styles:
Left aligned, the value is left;
Center aligned, the value is center;
Align right, the value is right;
Justify at both ends, the value is justify.
In order to simplify the operation and facilitate the use, Bootstrap controls the text alignment style by defining four class names: .text-left: left alignment. text-center: center alignment. text-right: right alignment. text-justify: both ends Aligned.
<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>List
In HTML documents, there are three main list structures:
Unordered list (<ul><li>…</li></ul>)
Ordered list (<ol><li>…</li></ol>)
定义列表(<dl><dt>…</dt><dd>…</dd></dl>)
Go to point list
class="list-unstyled"
<ul class="list-unstyled">
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>Inline list
class="list-inline", replace the vertical list with a horizontal list, and remove the bullet (number) to keep the horizontal display. It can also be said that inline lists are born for making horizontal navigation.
<ul class="list-inline">
<li>首页</li>
<li>java学院</li>
<li>在线课堂</li>
</ul>Definition list
Add some styles to the original foundation, use the style class="dl-horizontal" to make a horizontal definition list: When the title width exceeds 160px, three ellipsis will be displayed.
<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>Code
Generally used more frequently on personal blogs to display the style of the code. There are mainly three coding styles provided in Bootstrap:
(1) Use <code></code> to display a single line of inline code
(2) Use <pre></pre> to display multiple lines of code
Style: pre-scrollable (height, max-height height is fixed, 340px, more than there is a scroll bar)
(3) Use <kbd></kbd> to display user input codes, such as shortcut keys
One-line inline code
<code>this is a simple code</code>hot key
<p>使用<kbd>ctrl+s</kbd>保存</p>Multi-line block code
<!-- 代码会保留原本的格式，包括空格和换行 -->
<pre>
public class HelloWorld {
public static void main(String[] args){
System.out.println("helloworld...");
}
}
</pre>
<!--
显示html标签的代码需要适应字符实体
小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代
-->
<pre>
<ul>
<li>测试实体符</li>
</ul>
</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>form
Table style
Bootstrap provides 1 basic style and 4 additional styles for the table, and a table that supports responsiveness. In the process of using Bootstrap tables, you only need to add the corresponding class name to get different table styles:
Basis style
1).table: basic table
Attach Style
1) .table-striped: Zebra crossing table
2) .table-bordered: table with border
3) .table-hover: hover the highlighted table
4). table-condensed: compact table, the cell has no inner margin or the inner margin is smaller than other tables
tr, th, td style
Provides five different class names, each of which controls the different background colors of the row
| class | description | Instance |
|---|---|---|
| .active | Apply the hovering color to the row or cell | <font color="#f5f5f5">#f5f5f5</font> |
| .success | Indicates a successful operation | <font color="#dff0d8">#dff0d8</font> |
| .info | Operations that indicate information changes | <font color="#d9edf7">#d9edf7</font> |
| .warning | Indicates a warning action | <font color="#fcf8e3">#fcf8e3</font> |
| .danger | Indicates a dangerous operation | <font color="#f2dede">#f2dede</font> |
<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
The main function of the form is a web control used to communicate with users. A good form design can allow web pages to communicate with users better. Common elements in the form mainly include: text input box, drop-down selection box, radio button, check button, text field and button, etc.
Form control
.form-control .input-lg (larger) .input-sm (smaller)
Input box 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>Drop-down selection box select
Multi-line selection settings: 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
Vertical display: .checkbox
Horizontal display: .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
Vertical display: .radio
Horizontal display: .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>Button
1) Use button to achieve
Basic style: 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) Multi-label support: use a div to make buttons
<a href="##" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<div class="btn btn-warning">div标签按钮</div>3) Button size
Use .btn-lg, .btn-sm or .btn-xs to get buttons of different sizes
<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) Button disabled
Method 1: Add the disabled attribute to the label
<button class="btn btn-danger" disabled="disabled">禁用按钮</button> Method 2: Add the class name "disabled" to the element tag
<button class="btn btn-danger disabled">禁用按钮</button> Adding disabled to the class attribute is only disabled in style, not really disabled this button!
Form layout
The basic form structure comes with Bootstrap, and individual form controls automatically receive some global styles. The steps to create a basic form are listed below:
- Add role="form" to the parent <form> element .
- Put tags and controls in a <div> with class .form-group . This is necessary to obtain the optimal spacing.
- Add class = " form-control " to all text elements <input>, <textarea> and <select> .
Horizontal form
Show form-horizontal on the same line
Grid system with Bootstrap framework
<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>Inline form
Display the controls of the form in one line form-inline
Note that the label will not be displayed. The meaning of existence: If the label is not set for the input control, the screen reader will not be able to recognize it correctly.
<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>Thumbnail
Thumbnails are very common in e-commerce websites, and the most common place is the product list page. The realization of thumbnails is to be used in conjunction with the grid system. At the same time, thumbnails can be matched with titles, descriptions, buttons, etc.
<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
What the default .panel component does is just set the basic border and padding to contain the content.
.panel-default: default style
.panel-heading: Panel heading
.panel-body: Panel body content
<div class="panel panel-success">
<div class="panel-heading">
......
</div>
<div class="panel-body">
......
</div>
</div>BootStrap plugin
navigation
Use drop-down and button combination to make navigation
Key points:
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、二级菜单Tabbed navigation
<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>Capsule navigation
<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>Page navigation
Paging can be seen everywhere, divided into page navigation and page navigation
Page navigation: add pagination [pagination-lg | pagination-sm] to the ul tag
Page navigation: add pager to the ul tag
Pagination
<ul class="pagination">
<li><a href="#">«</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="#">»</a></li>
</ul>Turn page
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>Drop-down menu
When using the drop-down menu of the Bootstrap framework, two js must be used
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="js/bootstrap.min.js"></script> Key points:
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 box
Modal box (Modal) is a child form covering the parent form. Usually, the purpose is to display content from a single source, allowing some interaction without leaving the parent form. Subforms can provide information, interaction, etc.
usage
- Through the data attribute : set the attribute data-toggle="modal" on the controller element (such as a button or link) , and set data-target="#identifier" or href="#identifier" to specify the specific mode to switch Status box (with id="identifier").
- Via JavaScript : Using this technique, the modal box with id="identifier" can be called via JavaScript:
$('#identifier').modal(options);Instance
<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">×</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>method
| method | description | Instance |
|---|---|---|
| Toggle: .modal('toggle') | Switch the modal box manually. | $('#identifier').modal('toggle'); |
| Show: .modal('show') | Open the modal box manually. | $('#identifier').modal('show'); |
| Hide: .modal('hide') | Manually hide the modal box. | $('#identifier').modal('hide'); |