BootStrap笔记参考（全）-优极限

最新推荐文章于 2024-06-02 17:21:14 发布
最新推荐文章于 2024-06-02 17:21:14 发布
阅读量1.6k 收藏 18
点赞数 5
分类专栏： BootStrap 文章标签： 开发语言 前端 bootstrap html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51717662/article/details/124218039
版权

目录

BootStrap

1.主要内容

2.BootStrap的安装和使用

2.1BootStrap介绍

2.2BootStrap特点

2.3下载与使用

3.布局容器和栅格网格系统

3.1布局容器

3.2栅格网格系统

4.常用样式

4.1排版

4.2 表单

4.3 缩略图

4.4 面板

5.BootStrap插件

5.1 导航

5.2分页导航

5.3 下拉菜单

5.4模态框

BootStrap

本文章为本人观看优极限视频整理的bootstrap笔记，仅供参考。

1.主要内容

 

2.BootStrap的安装和使用

2.1BootStrap介绍

官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.

中文网：Bootstrap中文网

BootStrap是一套现成的CSS样式集合（做的还是很好的）。是两个推特员工干出来的。

BootStrap是最受欢迎的HTML,CSS和JS框架，用于来发响应式布局，移动设备优先的web项目。

BootStrap建设的网站：界面清晰，简洁；要素排版利落大方。

BootStrap特别适合那种没有设计师团队（甚至没有前端的团队）。可以快速的做出一个网页。

2.2BootStrap特点

1.简洁，直观，强悍的前端开发框架，HTML，css,js工具集，让web 开发更速，简单。

2.基于HTML5,CSS3的BootStrap，具有大量的又热特性：友好的学习曲线，卓越的兼容性。响应式设计，12列格网，样式向导文档。

3.自定义JQUERY插件，完整的类库，BootStrap3基于Less，BootStrap4基于Sass的css预处理技术

4.BootStrap响应式布局设计，让一个网站可以兼容不同分辨路的设备。BootStrap响应式布局设计，给用户提供更好的视觉使用体验。

5.丰富的组件。

2.3下载与使用

1.下载：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网

2.下载完成后

拷贝dis/css中的BootStrap.min.css到项目css中

拷贝dis/js中的BootStrap.min.js到项目js中

3.下载jQuery.js

jQuery

4.在html中模板为：

<!DOCTYPE html>
<html lang="en">
    <head>
        <!--设置当前HTML文件的字符编码-->
        
        <!--compatible兼容的，设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）-->
        
        <!--声明当前网页在移动端浏览器展示的相关设置-->
        <!-- 
            viewport表示用户是否可以缩放页面
            width指定视区的逻辑宽度
            device-width指定视区宽度应为设备的屏幕宽度
            initial-scale指令用于设置Web页面的初始化缩放比例
            initial-scale-1则将显示未经缩放的Web文档
         -->
        
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>Bootstrap基本的HTML模板</title>
        <!--引入Bootstrap核心样式表(CSS)文件-->
        <link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
        <!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签-->
        <!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询-->
        <!--[if It IE 9]>
        <script src="html5shiv/html5shiv.min.js"></script>
        <script src="Respond/respond.min.js"></script>
        <![endif]-->
        <!--自己写的CSS样式文件放head最下面-->
    </head>
    <body>
        <div><h1>Hello,world!</h1></div>
        <!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边-->
        <script src="js/jquery.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <!--自己写的js文件放在body最下面-->
    </body>
</html>
​


<!DOCTYPE html>
<html lang="en">
    <head>
        
        
        
​
        <title>Bootstrap基本的HTML模板</title>
​
        <link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
​
    </head>
    <body>
        <div><h1>Hello,world!</h1></div>
        <script src="js/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
​

5.参考API：

全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网

3.布局容器和栅格网格系统

3.1布局容器

1, .container类用于固定宽度并支持响应式布局的容器。

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

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

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

3.2栅格网格系统

BootStrap提供了一套响应式，移动设备优先的流式栅格系统。随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列(column)的组合来床架页面布局，你的内容九可以放入这些人创建好的布局中。

栅格网格系统

Bootstrap栅格网格系统将容器平分为12列，列的总数加起来不能超过12，大于12则自动换到下一行。通过一系列的行（row）与列（column）的组合来创建页面布局。网格系统必须使用到css,数据行(.row)必须包含在容器（.container）中，以便其赋予合适的对齐方式和内距（padding）。在行(.row)中可以添加列(.column)，即：行中有列！

    
    <!-- 容器 -->
        <div class="container">
            <!-- 行中有列-->
            <div class="row">
                <div class="col-md-4" style="background-color: #ffccff;">灰色与青</div>
                <div class="col-md-8" style="background-color: #ff0099;">灰色与青</div>
            </div>
        </div>

列组合

列组合就是更改数字来合并列（列总数不能超过12，大于12，自动换到下一行），有点类似于表格的colspan属性

  
      <!--  列组合  -->
        <div class="container">
            <div class="row">
                <div class="col-md-4" style="background-color: #ffccff;">1</div>
                <div class="col-md-4" style="background-color: #ff0099;">2</div>
                <div class="col-md-4" style="background-color: #ff0066;">3</div>
            </div>
            <div class="row">
                <div class="col-md-2" style="background-color: #CCFFFF;">1</div>
                <div class="col-md-4" style="background-color: #FFCCCC;">2</div>
                <div class="col-md-6" style="background-color: #FFFFCC;">3</div>
            </div>
        </div>

列偏移

有时候，我们不希望相邻的两个列紧靠在一起，让它们之间存在间隙，这就可以用列偏移（offset）来实现。使用列偏移只需在列元素上添加类名.col-md-offset-*(星号代表要偏移的列组合数)，同时应该注意偏移的总数不能超过12

    
    <!--  列偏移  -->
        <div class="container">
            <div class="row">
                <div class="col-md-1" style="background-color: #FF9966;">1</div>
                <div class="col-md-2 col-md-offset-3" style="background-color: #FF6666;">5</div>
                <div class="col-md-6" style="background-color: #FFCCCC;">6</div>
            </div>
        </div>

列排序

改变列的方向（改变左右浮动）并且设置浮动的距离

col-md-push-* ：往后push（右浮动） col-md-pull-* ：往前pull（左浮动）

     
   <!--  列排序  -->
        <div class="container">
            <div class="row">
                <div class="col-md-3" style="background-color: #0066CC;">列排序</div>
                <div class="col-md-3 col-md-pull-2" style="background-color: #FF6666;">左浮动</div>
                <div class="col-md-3 col-md-push-1" style="background-color: #FFFF00;">右浮动</div>
            </div>
        </div>

列嵌套

在一个列中添加一个或者多个行容器，然后在这个行容器中插入列

    <!--  列嵌套  -->
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div class="row">
						<div class="col-md-2" style="background-color: #1B6D85;">1-1</div>
						<div class="col-md-8" style="background-color: #204D74;">1-2</div>
						<div class="col-md-2" style="background-color: #FFCC99;">1-3</div>
					</div>
				</div>
				<div class="col-md-4" style="background-color: #CC9999;">2</div>
				<div class="col-md-4" style="background-color: #CCCC99;">3</div>
		    </div>
		</div>

4.常用样式

4.1排版

4.1.1标题

BootStrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>，只不过BootStrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题<small></small>或使用.small。

<h1>h1.Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>

4.1.2段落

段落是排版中另外一个重要元素之一。通过.lead来突出强调内容分(其作用就是增大文本字号，加粗文本，而且对行高和margin也左相应的处理。可以使用一下标签给文本左突出样式处理)。

<small>:小字号

<b><strong>：加粗

<i><em>:斜体

<p class="lead"><small>以后的</small><b>你</b>会<i>感谢<em>努力</em><strong>你</strong></p>

4.1.3强调

定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具体说明如下：

.text-muted:提示，使用浅灰色（#999）

.text-primary:主要，使用蓝色（#428bca）

.text-success:成功，使用浅绿色（#3c763d）

.text-info:通知信息，使用浅蓝色（#31708f）

.text-warning:警告，使用黄色（#8a6d3b）

.text-danger:危险，使用褐色（#a9442）

<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>

4.1.4对齐效果

在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"></p>

4.1.5列表

在HTML文档中，列表结构主要有三种：

  • 无序列表(<ul><li>....</li></ul>)

  • 有序列表(<ul><li>....</li></ul>)

  • 定义列表(<dl><dt>....</dt><dd>...</dd></dl>)

4.1.5.1去点列表

class="list-unstyled"

<ul class="list-unstyled">
    <li>无序列表1</li>
     <li>无序列表2</li>
</ul>

4.1.5.2内联列表

class="list-inline",把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内敛列表就是为制作水平导航而生。

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

4.1.5.3定义列表

在原有的基础上加入了 一些样式，使用样式class="dl-horizontal"制作水平定义列表：当标题宽度超过160px时，将会显示三个省略号。

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>
<dl class="dl-horizontal">
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

4.1.6代码

一般在个人博客上使用的较为频繁，用于显示代码的风格。在bootstrap主要提供了三种代码风格：

（1）使用<code></code>>来显示单行内联代码

（2）使用<pre></pre>>来显示多行代码

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

（3）使用:<kbd></kbd>来显示用户输入代码，如快捷键

4.1.6.1单行内联代码

<code>this is a simple</code>

4.1.6.2快捷键

<p>使用<kbd>ctrl+s</kbd>保存</p>

4.1.6.3多行块代码

<!--代码会保存元本的格式，包括空格和换行-->

<pre>
	public class helloworld{
		public static void main(String[] args){
			-----------s
		}
	}
	</pre>

4.1.7表格

4.1.7.1表格样式

在使用bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。

下表样式可用于表格中：

类描述
.table为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered为所有表格的单元格添加边框
.table-hover在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed让表格更加紧凑
联合使用所有表格类

4.1.7.2 tr，th，td样式

提供了五种不同的类名，每种类名控制了行的不同背景颜色

类描述
.active将悬停的颜色应用在行或者单元格上
.success表示成功的操作
.info表示信息变化的操作
.warning表示一个警告的操作
.danger表示一个危险的操作

4.2 表单

表单主要功能是用来与用户左交流的一个网页控件，良好的表单设计能够让王爷更好的沟通。表单中常见的元素主要包括：文本输入框，下拉选择框，单选按钮，复选按钮，文本域和按钮等。

4.2.1 表单控件

.form-control .input-lg(较大) .input-sm(较小)

4.2.1.1 输入框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>

4.2.1.2 下拉选择框select

多行选择设置：multiple="multiple"

<div class="col-sm-3">
	<select calss="form-control">
			<option>北京</option>
			<option>北京</option>
			<option>北京</option>
			</select>
</div>

4.2.1.3文本域

.form-control 表单元素的样式

4.2.1.4 复选框 checkbox

垂直显示：.checkbox

水平显示： .checkbox-inline

hiHiHiH'zHih垂直HiHiH'zHihuHiHii
		<div class="row">
			<div class="col-md-3">
		<div class="checkbox">
			<label><input type="checkbox" name="hobby"> 唱歌</label>
		</div>
		<div class="checkbox">
			<label><input type="checkbox" name="hobby"> 跳舞</label>
		</div>
			</div>
		</div>
//水平	
<div class="row">
			<div class="col-md-3">
				<label class="checkbox-inline">
					<input type="checkbox" name="hobby"> 唱歌
				</label>
				<label class="checkbox-inline">
					<input type="checkbox" name="hobby"> 跳舞
				</label>
				</div>
		</div>

4.2.1.5 单选框 radio

垂直显示： .radio

水平显示：.radio-inline

<div class="row">
			<div class="col-md-3">
				<div class="radio">
					<label><input type="radio" name="sex"> 男</label>
				</div>
			<div class="radio">
				<label><input type="radio" name="sex"> 女</label>
			</div>
			</div>
		</div>

4.2.1.6 按钮

（1）使用实现

基础样式：btn

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

滑稽样式：btn-primary btn-info btn-success btn-danger btn-link btn-default

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

(2)多标签支持：使用a div等制作按钮

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

(3)按钮大小

使用.btn-lg .btn-sm .btn-xs 就可以获得不同尺寸的按钮。

<button class="btn btn-primary btn-xs">按钮</button>

(4)按钮禁用

方法1：在标签中添加disabled属性

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

方法2：在元素标签中添加类名“disabled”

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

在class属性中添加disabled知识样式上禁用了，并不是真正的禁用 了此按钮/

4.2.2 表单布局

基本的表单结构是bootstrap自带的，个别的表单控件自动接收一些布局样式。下面列出了创建基本表单的步骤：

  • 向父<form>元素添加role="form".

  • 把标签和控件放在一个带有class.form-group的<div>中。这是获取最佳间距所必须的

  • 向所有的本文元素<input>,<textarea>,<select>添加class="form-control".

4..2.21 水平表单

向同一行显示form-horizontal

配合bootstrap框架的网格系统。

<form calss="form-horizontal">
	<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 calss="form-group checkbox">
        <label><input type="checkbox"/>记住密码</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>
</form>

4.2.2.2 内联表单

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

注意label不会显示，存在的意义：如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别。

<form calss="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 calss="form-group checkbox">
        <label><input type="checkbox"/>记住密码</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>
</form>

4.3 缩略图

缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题，面熟内容，按钮等。

<div class="container">
	<div class="row">
		<div class="col-md-3">
			<div class="thumbnail">
				<img src="gaoyuanyuan.webp" alt="..."style="width: 240px;height: 360px;">
				<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>

4.4 面板

默认的.panel组件所左的知识设置基本的边框（border）和内补（padding）来包含内容。

.oanel-default:默认样式。

5.BootStrap插件

去菜鸟搜样式，然后根据自己需求再改。

5.1 导航

使用下拉与按钮组合可以制作导航

要点：

1.基本样式：.nav与"nav-tabs","nav-pills"组合制作导航

2.分类：

（1）标签型(nav-tabs)导航

（2）胶囊型（nav-pills）导航

（3）堆栈（nav-stacked）导航

（4）自适应（nav-justified）导航

（5）面包蟹式（breadcrumb）导航,单独使用样式，不予nav一起使用，直接加入ol,ul中即可，一般用于导航，主要起的作用是告诉用户所处页面的位置（当前位置）。

2.状态：

选中状态 active样式

禁用状态：disable

5.1.1 标签式导航

<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

5.1.2 胶囊式导航

<div class="container">
    <div class="row">
        <div class="span8">
            <ul class="nav nav-pills">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

5.2分页导航

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

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

翻页导航：ul标签上加pager

5.2.1 分页

<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>

5.2.2 翻页导航

<ul class="pager">
	<li><a href="#">Previous</a></li>
	<li><a href="#">Next</a></li>
</ul>

5.3 下拉菜单

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

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。

如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</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">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

要点：

1.使用一个类名为dropdown或btn-group包裹整个下拉框：

<div class="dropdown"></div>

2.默认向下dropdown，向上弹起加入.dropup即可

3.使用button作为父菜单，使用类名：dropdown-toggle和自定义date-toggle属性

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>

4.在button中使用font制作下拉箭头

<span class="caret"></span>

5.对齐方式：

（1）dropdown-menu-left 左对齐 默认样式

（2）dropdown-menu-right 右对齐

6.激活状态（.active）和禁用状态（.disabled）

5.4模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

您可以切换模态框（Modal）插件的隐藏内容：

  • 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。

  • 通过 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>
<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">添加用户</h4>
            </div>
            <div class="modal-body">
            	<form class="form-horizontal" role="form">
                    <div class="from-group">
                        <label for="uname" class="col-md-2 control-label">姓名</label>
                        <div class="col-md-8">
                            <input type="text" id="uname" class="form-control" placeholder="请输入姓名"/>
                        </div>
                    </div>
                     <div class="from-group">
                        <label for="upwd" class="col-md-2 control-label">密码</label>
                        <div class="col-md-8">
                            <input type="text" id="upwd" class="form-control"placeholder="请输入密码" />
                        </div>
                    </div>
                </form>
            </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>

代码讲解：

  • 使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。

  • 如果您仔细查看上面的代码，您会发现在 <button> 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。

  • 在模态框中需要注意两点：

    1. 第一是 .modal，用来把 <div> 的内容识别为模态框。

    2. 第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。

  • aria-labelledby="myModalLabel"，该属性引用模态框的标题。

  • 属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。

  • ​

    ，modal-header 是为模态窗口的头部定义样式的类。

    ​

  • class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。

  • data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

  • class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。

  • class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。

  • data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

A-艺凡
关注
  • 5
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Bootstrap笔记1
mintsolace的博客
08-15 89
开始使用Bootstrap 下载安装： 在HTML中引入相应的CSS和JS文件 注意：Bootstrap的JS组件依赖于jQuery Bootstrap文档： http://v3.bootcss.com/ 中文网 视口的作用： 在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980； 视口的...
BootStrap笔记
Alice_Lee_Lee的博客
09-26 207
使用 在官网下载后，将css、font、js包下的内容粘贴的项目中 在代码中引入 <link rel="stylesheet" href="../css/bootstrap.min.css"> <body> </body> <script src="../js/npm.js"></script> <script src="../js/bootstrap.min.js"></script> 容器 流体容器 &lt
Termux_Pack_Android5.0.zip
02-18
Android5.0版本使用的Termux及其API，Boot等附属包（除API包未知是否为最高版本外其他均为支持Android5.0版本的termux应用的最高版本）。
Bootstrap笔记大全
认真学习前端的博客
03-07 1574
Bootstrap笔记大全
bootstrap5-学习笔记1-容器+布局+按钮+工具
最新发布
陆沙的博客
06-02 907
bs5
Bootstrap【学习笔记】
weixin_52487106的博客
01-18 341
学习笔记
适合初学者的BootStrap笔记，全网最全
qq_42176665的博客
11-02 871
最全面的BootStrap的知识点，适合新手和小白
Bootstrap学习笔记
sako_77的博客
04-19 219
前端页面框架
bootstrap-table-zh-CN.js
08-27
bootstrap-table-zh-CN.js,有需要就下载吧
bootstrap-5.1.3-dist.zip
11-11
这个"bootstrap-5.1.3-dist.zip"压缩包包含的是Bootstrap的5.1.3稳定版本，该版本提供了最新的功能改进和修复，旨在提升开发者的工作效率和用户体验。 在Bootstrap 5.1.3中，开发者可以期待以下关键知识点： 1. **...
bootstrap-table-fixed-columns.zip
01-14
"bootstrap-table-fixed-columns.zip" 是一个专为 Bootstrap Table 设计的插件，用于解决表格滚动时表头固定不动的问题，使得用户在浏览长表格时始终能清晰地看到列名。 FastAdmin 是一个基于 ThinkPHP5 开发的开源...
swagger-bootstrap-ui-1.9.6-API文档-中文版.zip
07-13
赠送jar包：swagger-bootstrap-ui-1.9.6.jar； 赠送原API文档：swagger-bootstrap-ui-1.9.6-javadoc.jar； 赠送源代码：swagger-bootstrap-ui-1.9.6-sources.jar； 赠送Maven依赖信息文件：swagger-bootstrap-ui-...
BootStrap学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 943
二、安装和使用 参考API：http://v3.bootcss.com/css/ 类用于100% 宽度，占据全部视口（viewport）的容器 02 栅格网格系统 BootStrap 提供了一套响应式、移动设备优先的流式栅格系统。随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或
bootstrap笔记
weixin_74155781的博客
02-03 196
bootstrap笔记
Bootstrap 笔记
qq_42316056的博客
08-23 290
Bootstrap 小白笔记
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值