BootStrap

最新推荐文章于 2024-07-31 21:57:52 发布

顽强的狐狸

最新推荐文章于 2024-07-31 21:57:52 发布

阅读量1.8k

点赞数 10

文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/qq_55653761/article/details/126521909

版权

BootStrap入门

1.主要内容

BootStrap模板

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

2.安装和使用

参考API：http://v3.bootcss.com/css/

注意：先引入jQuery的再引入框架的

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）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或32份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出来强大的响应式网格系统。BootStrapu框架中的网格系统就是将容器平分成12份。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHBfM5to-1661400993312)(BootStrap.assets/2493574-20210810221748265-1980092487.png)]

注意：网格系统必须使用到CSS

container、row、xs（xsmall phones），sm（small tablets），md（middle desktops），lg（laege desktops），即

超小屏（自动），小屏（750px），中屏（970px）和大屏（1170px）

一般使用container、row、md（middle desktops）

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

在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。

具体内容应当放置在列容器之内。

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

3.2.1.列组合

列总数不能超过12，大于12则自动换刀下一行

我是多余的，13-14

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JjcsWBiq-1661400993313)(BootStrap.assets/image-20220810174803166.png)]

3.2.2.列偏移

如果我们不希望相邻的两个列紧靠在⼀起，但⼜不想使⽤margin或者其他的技术⼿段来。这个时候就可以使⽤列偏移（offset）功能来实现。使⽤列偏移也⾮常简单，只需要在列元素上添加类名"col-md-offset-*“(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加"col-md-offset-8”，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断⾏|换⾏显示)。

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

偏移

<div class="row">
	<div class="col-md-3" style="background-color: beige;">3</div>
	<div class="col-md-4 col-md-offset-5" style="background-color: deepskyblue;">4</div>
</div>

注意

：row内所有的块长度加偏移量之和<=12 eg:上面的 3+4+5=12

：偏移是相对于与它最近左侧块的右边缘

下图是 3+4+6，不在一行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uiqb151r-1661400993314)(BootStrap.assets/image-20220810175632430.png)]

3.2.3.列排序

列排序其实就是改变列的⽅向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的⽹格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)。往前pull，往后push。

3.2.4.列嵌套

Bootstrap框架的⽹格系统还⽀持列的嵌套。你可以在⼀个列中添加⼀个或者多个⾏（row）容器，然后在这个⾏容器中插⼊列

<div class="row">
				<div class="col-md-6" style="background-color: beige;">
				<div class="row">
					<div class="col-md-1" style="background-color: #204D74;">2</div>
					<div class="col-md-9" style="background-color: yellowgreen;">9</div>
				</div>
				</div>
				<div class="col-md-6 " style="background-color: deepskyblue;">我旁边那呆子嵌套了两个，吧他自己的颜色盖住了</div>
			</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jnyXORqz-1661400993314)(BootStrap.assets/image-20220810181429994.png)]

4.常用样式

4.1.排版

4.1.1.标题

对h1~h6的标题效果进行覆盖，提供劳务对应的类名，为非标题元素设置样式

副标题 small标签或 .small类名

4.1.2.段落

段落是排版中另⼀个重要元素之⼀。通过==.lead== 来突出强调内容(其作⽤就是增⼤⽂本字号，加粗⽂本，⽽且对⾏⾼和margin也做相应的处理。可以使⽤以下标签给⽂本做突出样式处理：

：小字号

:加粗

:斜体

html：

以后的你会感谢现在努力的你

4.1.3.强调

定义了一套类名，强调类名，强调类都是通过颜色来表示强调

.text-muted：提示，使用浅灰色

.text-primary：主要，使用蓝色

.text-success：成功，使用浅绿色

.text-info：通知信息，使用浅蓝色

.text-warning：警告，使用黄色

.text-danger：危险，使用褐色

html

.text-muted：提示，使用浅灰色

```html

.text-primary：主要，使用蓝色

.text-success：成功，使用浅绿色

.text-info：通知信息，使用浅蓝色

.text-warning：警告，使用黄色

.text-danger：危险，使用褐色

```

4.1.4.对齐

通过定义四个类名来控制文本的对齐风格

.text-left：左对齐

.text-center：居中对齐

.text-right：右对齐

.text-justify：两端对齐

4.1.5列表

去点列表

class=“list-unstyled”
内联列表

class=“list-inline”，把垂直列表换成⽔平列表，⽽且去掉项⽬符号（编号），保持⽔平显示。也可以说内联列表就是为制作⽔平导航⽽⽣。
定义列表

在原有的基础加⼊了⼀些样式，使⽤样式 class=“dl-horizontal” 制作⽔平定义列表 : 当标题宽度超过160px 时，将会显示三个省略号。

eg:

<!-- 正常 -->
		<ul>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>
	<dl>
		<dt>自定义标题一</dt>
		<dd>内容一</dd>
		<dt>自定义标二</dt>
		<dd>内容二</dd>
	</dl>
	<!-- 去点-->
	<ul class="list-unstyled">
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
	</ul>	
	<!-- 水平：内联列表-->
	<ul class="list-inline">
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
	</ul>
	<!-- 自定义   水平：内联列表-->
	<dl class="dl-horizontal">
		<dt>自定义标题一</dt>
		<dd>内容一</dd>
		<dt>自定义标二</dt>
		<dd>内容二</dd>
	</dl>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yVzYhuLj-1661400993315)(BootStrap.assets/image-20220810184841780.png)]

4.2.代码

4.2.1.单行标签

1

4.2.2.键盘标签

Ctrl

4.2.3.多行标签

会识别空格和回车，所以两个效果不一样

<pre>
public class HelloWorld{
public static void main(String[] args){
System.out.println("Hello World")
}
}

			public class HelloWorld{
			public static void main(String[] args){
				System.out.println("Hello World")
				}
			}
		</pre>

4.2.4.原生标签

>: &gt;
<: &lt;

			我是样式版
			<h1>我是原生版</h1>

4.2.4.滚动标签

<pre class="pre-scrollable">
			<ul>
				<li>..........</li>
				<li>..........</li>
				<li>..........</li>
				<li>..........</li>
				<li>..........</li>
				<li>..........</li>
				<li>..........</li>
				<li>..........</li>
				<li>..........</li>
				<li>..........</li>
				<li>..........</li>
				<li>..........</li>
			</ul>
		</pre>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bhgVz90k-1661400993316)(BootStrap.assets/image-20220811101851728.png)]

4.3.表格

4.3.1表格样式

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个⽀持响应式的表格。在使⽤Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格⻛格：

基础样式
 1）.table：基础表格 
附加样式
 1) .table-striped：斑⻢线表格 
 2) .table-bordered：带边框的表格 
 3) .table-hover：⿏标悬停⾼亮的表格 
 4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距⼩

4.3.2 tr,th,td

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

类	描述	实例
.active	将悬停的颜⾊应⽤在⾏或者单元格上	#f5f5f5
.success	表示成功的操作	#dff0d8
.info	表示信息变化的操作	#d9edf7
.warning	表示⼀个警告的操作	#fcf8e3
.danger	表示⼀个危险的操作	#f2dede

eg:html(点击一下)

JavaSE	数据库	JavaScript
向对象	oracle	json
数组	mysql	ajax

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fQJkersL-1661400993317)(BootStrap.assets/image-20220811103139356.png)]

4.4.表单

表单主要功能是⽤来与⽤户做交流的⼀个⽹⻚控件，良好的表单设计能够让⽹⻚与⽤户更好的沟通。表单中常⻅的元素主要包括：⽂本输⼊框、下拉选择框、单选按钮、复选按钮、⽂本域和按钮等。

4.4.1表单控件

form-control 表单元素的样式
.input-lg .input.sm 表单控件的大小

4.4.2.输入框 text

		<div class="col-sm-3">
		 <input type="text" name="" id="" class="form-control" /><br>
		 <input type="text" name="" id="" class="form-control input-lg" /><br>
		 <input type="text" name="" id="" class="form-control input-sm" /><br>
		</div>

4.4.3.下拉框

多⾏选择设置：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>

4.4.4.文本域textarea

<div class="col-sm-3">
		 <textarea class="form-control" rows="3"></textarea>
		</div>

文本框

原生

<input type="text" />

BootStrap

form-control 表单元素的样式
.input-lg .input.sm 表单控件的大小

<input type="text" class="form-control"/><!--但是会占一整行-->
<!--可行的是，-->
<div class="row">
    <div class="col-md-3">
        <input type="text" class="form-control"/>
    </div>
</div>

下拉框

原生

<select>
    <option>请选择城市</option>
    <option>上海</option>
    <option>北京</option>
</select>

4.4.5.复选框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>

4.4.6单选框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>

4.4.7.按钮

1）使⽤ button 实现

基础样式： btn

附加样式：

btn-primary
btn-info
btn-success
btn-warning
btn-danger
btn-link
btn-default

		<button class="btn">按钮</button>
		<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 span 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" 不推荐

注：在class属性中添加disabled只是样式上禁⽤了，并不是真正的禁⽤了此按钮！

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wGIolA9R-1661400993317)(BootStrap.assets/image-20220811110855022.png)]

4.5.表单布局

基本的表单结构是 Bootstrap ⾃带的，个别的表单控件⾃动接收⼀些全局样式。下⾯列出了创建基本表单的步骤：

向⽗元素添加 role=“form”。
把标签和控件放在⼀个带有 class .form-group 的
中，这就获取最贱间距所必需的。
向所以的文本原生、和添加class=“form-control”。

4.5.1.水平表单和内联表单

 <form action="#" class="form-horizontal" role="form">
				 <h2 align="center">用户信息表</h2>
				 <!-- 表单中的表单元素组-->
			 	<div class="form-group">
					<label for="uname" class="control-label col-md-2">姓名</label>
					<div class="col-md-8">
						<input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
					</div>
				</div>
				<div class="form-group">
					<label for="upwd" class="control-label col-md-2">密码</label>
					<div class="col-md-8">
						<input type="password" id="upwd" class="form-control" placeholder="请输入密码" />
					</div>
				</div>
				<div class="form-group">
					<label  class="control-label col-md-2">爱好</label>
					<div class="col-md-8 col-md-offset-1">
						<label class="checkbox-inline">
							<input type="checkbox" name="hobby" /> 唱歌
						</label>
						<label class="checkbox-inline">
							<input type="checkbox" name="hobby" /> 跳舞
						</label>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-md-2">城市</label>
					<div class="col-md-8">
						<select class="form-control">
							 <option>请选择城市</option>
							 <option>上海</option>
							 <option>北京</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label for="remark" class="control-label col-md-2">简介</label>
					<div class="col-md-8">
						<textarea id="remark" class="form-control"></textarea>
					</div>
				</div>
				<div class="form-group">
					
					<div class="col-md-2 col-md-offset-5">
						<button class="btn btn-primary">提交</button>
					</div>
				</div>
			 </form>
			 <hr />
			 
			 <form class="form-inline">
				 <div class="form-group">
					 <label for="userName">姓名</label>
					 <input type="text" id="userName" class="form-control" placeholder="请输入姓名" />
				 </div>
				 <div class="form-group">
					 <label for="userPwd">密码</label>
					 <input type="text" id="userPwd" class="form-control" placeholder="请输入密码" />
				 </div>
				 <div class="form-group">
				 	<button class="btn btn-default">提交</button>
				 </div>
			 </form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wtry7AD-1661400993318)(BootStrap.assets/image-20220811112454740.png)]

4.6.缩略图

缩略图在电商类的⽹站很常⻅，最常⽤的地⽅就是产品列表⻚⾯。缩略图的实现是配合⽹格系统⼀起使⽤。同时还可以让缩略图配合标题、描述内容，按钮等

<div class="container">
				<div class="row">
					<div class="col-md-3">
						<div class="thumbnail">
						<img src="../img/01.jpg" alt="...">
						<h3>阿宇</h3>
						<p>精明阿宇被迫学前端BootStrap</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>

html：点击

阿宇

精明阿宇被迫学前端BootStrap

喜欢评论

阿宇

精明阿宇被迫学前端BootStrap

喜欢评论

阿宇

精明阿宇被迫学前端BootStrap

喜欢评论

阿宇

精明阿宇被迫学前端BootStrap

喜欢评论

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PqWhXFT-1661400993319)(BootStrap.assets/image-20220811113635502.png)]

4.7.面板

默认的 .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>

eg:

<div class="panel panel-success">
			 <div class="panel-heading">
			 <h2 align="center">阿宇被迫学习</h2>
			 </div>
			 <div class="panel-body">
			 <div class="row">
			 					<div class="col-md-3">
			 						<div class="thumbnail">
			 						<img src="../img/01.jpg" alt="...">
			 						<h3>阿宇</h3>
			 						<p>精明阿宇被迫学前端BootStrap</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 class="col-md-3">
			 						<div class="thumbnail">
			 						<img src="../img/02.jpg" alt="...">
			 						<h3>阿宇</h3>
			 						<p>精明阿宇被迫学前端BootStrap</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 class="col-md-3">
			 						<div class="thumbnail">
			 						<img src="../img/03.jpg" alt="...">
			 						<h3>阿宇</h3>
			 						<p>精明阿宇被迫学前端BootStrap</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 class="col-md-3">
			 						<div class="thumbnail">
			 						<img src="../img/04.jpg" alt="...">
			 						<h3>阿宇</h3>
			 						<p>精明阿宇被迫学前端BootStrap</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>
			</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-33svFhi4-1661400993320)(BootStrap.assets/image-20220811114407088.png)]

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中即可，⼀般⽤于导航，主要是起的作⽤是告诉
⽤户现在所处⻚⾯的位置（当前位置）
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 class="breadcrumb">
		    <li><a href="#">Home</a></li>
		    <li><a href="#">2013</a></li>
		    <li class="active">十一月</li>
		</ul>

5.2.分页导航

分⻚随处可⻅，分为⻚码导航和翻⻚导航
⻚码导航：ul标签上加pagination [pagination-lg | pagination-sm]
翻⻚导航：ul标签上加pager

分页式

<p>分页式</p>
		<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>

翻页式

<p>翻页式</p>
		<ul class="pager">
		 <li><a href="#">Previous</a></li>
		 <li><a href="#">Next</a></li>
		</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ATX60hkO-1661400993320)(BootStrap.assets/image-20220811120844229.png)]

5.3.下拉菜单

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

必须先调⼊jQuery

<!-- 如果要使⽤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）
			 -->

<!-- 1、使用一个类名为dropdown 或btn-group的div 包裹整个下拉框: -->
			 <div class="dropdown">
				 <!--3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性 -->
				 <button class="dropdown-toggle btn btn-default" data-toggle="dropdown">
					喜欢的电视
					<!-- 4、在button中 使用font 制作下拉箭头 -->
					<span class="caret"></span>
				 </button>
				 <!-- 5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
				 <ul class="dropdown-menu">
					 
					 
					 <!-- 7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
					 <li class="dropdown-header">--爱国--</li>
					 <li><a href="https://www.dititi.com/video/23295" target="_blank">战狼1</a></li>
					 <li><a href="#">战狼2</a></li>
					 <!-- 6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
					 <li class="divider"></li>
					 
					 
					 <!-- 7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
					 <li class="dropdown-header">--武术--</li>
					 <li><a href="#">太极拳</a></li>
					 <li><a href="#">阴阳拳</a></li>
					 <!-- 6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
					 <li class="divider"></li>
					 
					 
					 <!-- 7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
					 <li class="dropdown-header">--恐怖--</li>
					 <!-- 9、激活状态（.active）和禁用状态（.disabled）-->
					 <li class="active"><a href="#">僵尸叔叔</a></li>
					 <li class="disabled"><a href="#">生化危机</a></li>
					 <!-- 6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
					 <li class="divider"></li>
					 	 
				 </ul>
			 </div>

5.4.模态框

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

⽤法

通过 data 属性：在控制器元素（⽐如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target=“#identifier” 或 href=“#identifier” 来指定要切换的特定的模态框（带有 id=“identifier”）。
通过 JavaScript：使⽤这种技术，可以通过 JavaScript 来调⽤带有 id=“identifier” 的模态框

使用方法：

一般使用直接复制模态窗口。需要什么自己加以添加就行了。

	<!-- 模态框（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>
	 </div>
</div>

方式一：通过普通的点击事件

data-target=“#myModal”> #myModel是需要被弹出窗口的id

<!-- 按钮触发模态框 -->
	<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
		开始演示模态框
	</button>

方式二：通过js（jQuery）

<script type="text/javascript">
		window.onload=function(){
			$("#btnCreateModel").click(function(){
				//手动模态窗口
				$("#myModal").modal("show");
			});
		};
</script>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模态框</title>
		<link  rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
		<script src="../js/jquery-3.4.1.js"></script>
		<script src="../bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript">
		window.onload=function(){
			//给打开模态窗口按钮绑定单击事件
			$("#btnCreateModel").click(function(){
				//手动打开模态窗口
				$("#myModal").modal("show");
			});
			//点击提交按钮关闭模态窗口
			$("#btnSumbit").click(function(){
				//手动关闭模态窗口
				$("#myModal").modal("hide");
			});
		};
		</script>
	</head>
	<body>
		<h2>创建模态框（Modal）</h2>
		<!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
		 开始演示模态框
		</button>
		<button id="btnCreateModel">打开模态窗口</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 action="#" class="form-horizontal" role="form">
								 <!-- 表单中的表单元素组-->
							 	<div class="form-group">
									<label for="uname" class="control-label col-md-2">姓名</label>
									<div class="col-md-8">
										<input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
									</div>
								</div>
								<div class="form-group">
									<label for="upwd" class="control-label col-md-2">密码</label>
									<div class="col-md-8">
										<input type="password" id="upwd" class="form-control" placeholder="请输入密码" />
									</div>
								</div>
								<div class="form-group">
									<label  class="control-label col-md-2">爱好</label>
									<div class="col-md-8 col-md-offset-1">
										<label class="checkbox-inline">
											<input type="checkbox" name="hobby" /> 唱歌
										</label>
										<label class="checkbox-inline">
											<input type="checkbox" name="hobby" /> 跳舞
										</label>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-2">城市</label>
									<div class="col-md-8">
										<select class="form-control">
											 <option>请选择城市</option>
											 <option>上海</option>
											 <option>北京</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="remark" class="control-label col-md-2">简介</label>
									<div class="col-md-8">
										<textarea id="remark" class="form-control"></textarea>
									</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" id="btnSumbit">提交更改</button>
				</div>
			</div>
		 </div>
	</div>
	
	</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5LBpngm-1661400993321)(BootStrap.assets/image-20220811155910032.png)]

注意：

-2">爱好

唱歌

跳舞

城市

请选择城市
上海
北京

简介

</body>


效果：

[外链图片转存中...(img-P5LBpngm-1661400993321)]

注意：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b4QEfEnC-1661400993322)(BootStrap.assets/image-20220811160127486.png)]