BootStrap的应用
1、BootStrap的简介
1、官网
https://www.bootcss.com/
2、选择3版本，比较稳定
3、Bootstrap是一个用于快速开发 web 应用程序和网站的前端框架。
Bootstrap是基于HTML、CSS、JAVASCRIPT的。响应式布局
让web开发更简单、更快速
2、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>
3、下载安装
http://v3.bootcss.com/css/
4、下载后使用步骤
1、拷贝dist/css的bootstrap.min.css到项目css中
2、拷贝dist/js的bootstrap.min.js到项目的js中去
3、引入jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap的表单</title>
<script src="../jquery/jquery.3.6.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>
<body>
</body>
</html>
5、学习样式
5.1布局容器
1、布局容器
1） .container类用于固定宽度支持响应式布局的容器
<div class="container">
...
</div>
2）.container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器
<div class="container-fluid">
...
</div>
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
</div>s
5.2栅格网格系统
BootStrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或32份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出来强大的响应式网格系统。BootStrapu框架中的网格系统就是将容器平分成12份。
注意：网格系统必须使用到CSS
container、row、xs（xsmall phones），sm（small tablets），md（middle desktops），lg（laege desktops），即
超小屏（自动），小屏（750px），中屏（970px）和大屏（1170px）
数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）。在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。具体内容应当放置在列容器之内。
5.2.1列偏移
简单来说，就是bootstrap把布局分成了行和列的形式，直接使用样式就可以表现出来，就等于你可以直接使用它提供的盒子，不用再去写css样式，比如说一个留白的盒子就是:<div class="container"></div>，然后就是写行样式col-md-列数。然后一定加起来=12，不然会掉。接下来就是列偏移，不希望相邻的两个列靠在一起，就可以使用列偏移来实现。就在列元素添加类名col-md-offset-*,*号表示要偏移的列组合数，这个类名的列就会向右偏移
<div class="container">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1 col-md-offset-1">1</div>
<div class="col-md-6">6</div>
<div class="col-md-2">2</div>
</div>
5.2.2列排序
列排序就是改变列的方向，就是改变左右浮动，并且设置浮动的距离，在Bootstrap框架的网格系统中通过添加类名col-md-push-*和col-md-pull-*（*号表示移动的列的组合数），往前pull、往后push
<div class="container">
<div class="row">
<div class="col-md-1 " style="background-color:red ;">1</div>
<!-- push向右浮动 后面的元素会覆盖前面的元素 -->
<div class="col-md-1 col-md-push-5" style="background-color:green ;">1</div>
<div class="col-md-1 " style="background-color:yellow ;">1</div>
<!-- pull向左浮动，会覆盖前面的元素 -->
<div class="col-md-1 col-md-pull-1" style="background-color:blue;">1</div>
<div class="col-md-1 " style="background-color:pink;">1</div>
</div>
</div>
5.2.3列嵌套
bootstrap框架的网格系统还支持列的嵌套，可以在一个列中添加一个或者多个行容器，然后在这个行容器中插入列：就是在行中的列又被当做行，里面嵌入12列
<div class="container">
<div class="row">
<!-- 匹配大屏幕 -->
<div class="col-md-1" style="background-color:red ;">1</div>
<div class="col-md-1" style="background-color:blue ;">1</div>
<div class="col-md-1" style="background-color:yellow;">1</div>
<div class="col-md-1" style="background-color:orange ;">1</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3" style="background-color:red ;">3</div>
<div class="col-md-3" style="background-color:blue ;">3</div>
<div class="col-md-3" style="background-color:yellow;">3</div>
</div>
</div>
<div class="col-md-2">2</div>
</div>
</div>
5.3媒体查询
判断系统的分辨率
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
5.4栅格的参数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akobFbHm-1666176993592)(C:\Users\杨怡然\Desktop\捕获.PNG)]
5.5常用文字样式
5.5.1排版的文字样式
BootStrap和普通的HTMl页面一样，对h1heh6有了其他的处理，为了不是标题的样式有标题的效果，也定义了一些样式进行设置
1、标题
1) bootstrap对h1-h6的标题效果进行覆盖，提供了对应的类名，为非标体元素设置样式 比如： .h1~.h6
2)副标题 ：small标签或者.small类名
h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<div>你好</div>
<div class="h3">你好</div>
<h1>标题1 <small>副标题</small></h1>
<h1>标题1 <span class="small">副标题</span></h1>
2、段落
段落是排版中的一个重要元素之一，通过.lead来突出强调内容，（就是增大文本字号，加粗文本而且对行高和margin也做相应的处理，可以使用下面的标签给文本做出突出样式处理
<small>:小号字
<b><strong>:加粗
<i><em>:斜体
3、强调
定义了一套类名，强调类名，强调类都是通过颜色来表示强调
.text-muted：提示，使用浅灰色
.text-primary：主要，使用蓝色
.text-success：成功，使用浅绿色
.text-info：通知信息，使用浅蓝色
.text-warning：警告，使用黄色
.text-danger：危险，使用褐色
<hr>
<!-- 对文本设置颜色 -->
<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、对齐
text-left：左对齐
text-center:居中对齐
text-right:右对齐
text-justify：两端对齐
5、代码风格
用标签包裹
单行： <code></code>
快捷键：<kbd></kbd>s
多行：<pre></pre>
5.6表格
5.6.1表格样式
bootstrap为表格提供了1中基础样式和4种附加样式以及一个支持响应式的表格，在使用bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格
5.6.1.1 基础样式
.table:基础表格
5.6.1.2 附加样式
1)table-striped:斑马线表格
2）table-bordered：带边框的表格
3）table-hover：鼠标悬停高亮的表格
4）table-condensed：紧凑型表格，单元格没内边距或者内边距较小
5.6.2 tr、th、td样式
提供了五中不同的类名，每种类名控制了行的不同的背景颜色
.active:将悬停的颜色应用在行或者单元格上
.success:表示成功的操作
.info:表示信息变化的操作
.warning:表示一个警告的操作
.danger:表示一个危险的操作
5.7表单
表单主要功能是用来和用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通，表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等
5.7.1 表单控件
.form-control .input-lg (较大) .input-sm (较小)
5.7.1.1 输入框text
<div class="row">
<div class="col-md-3">
<input type="text" class="form-control"><br>
<input type="text" class="form-control input-lg"><br>
<input type="text" class="form-control input-sm"><br>
</div>
</div>
5.7.1.2 下拉选择框
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>重庆</option>
<option>海南</option>
</select>
</div>
</div>
5.7.1.3 文本域
<div class="row">
<div class="col-md-3" class="form-control">
<textarea ></textarea>
</div>
</div>
5.7.1.4 复选框
垂直显示：.checkbox
水平显示：.checkbox-inline
<!-- 垂直显示 -->
<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 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>
<label class="checkbox-inline"><input type="checkbox" name="hobby">干饭 </label>
</div>
</div>
5.7.1.5 单选框
<!-- 垂直居中 -->
<div class="row">
<div class="col-md-3">
<div class="radio">
<label><input type="radio" name="hobby">女 </label>
</div>
<div class="radio">
<label><input type="radio" name="sex">男 </label>
</div>
</div>
</div>
水平显示
<div class="row">
<div class="col-md-3">
<label class="checkbox-inline"><input type="radio" name="sex">男 </label>
<label class="checkbox-inline"><input type="radio" name="sex">女 </label>
</div>
</div>
5.7.1.5 按钮
基础样式：.btn
附加样式： btn-primary、 btn-info、btn-sucess、btn-warning、
btn-danger、btn-link、 btn-default
<button class="btn">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-sucess">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-link">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-parmary">按钮</button>
设置按钮的大小
<button class="btn btn-default" >按钮</button>
<button class="btn btn-link btn-lg">按钮</button>
<button class="btn btn-info btn-sm">按钮</button>
其他元素通过按钮样式设置
<!-- 通过按钮样式设置其他元素为按钮效果 -->
<a href="" class="btn">连接</a>
<a href="" class="btn btn-default ">连接</a>
<span class="btn-info">span元素</span>
5.7.2 表单布局
基本的表单结构是bootstrap自带的，个别的表单空间自动接收一些全局样式，下面是创建表单的基本步骤
1）向父<form>元素添加role="form"：表明当前角色是表单
2）把标签和控件放在一个带有class.form-group的div中，这是获取最佳间距所必需的
3）向所有的文本元素<input>、<textarea></textarea>和select 添加class="form-control",
5.7.2.1水平表单
同一行显示form-horizontal
配合bootstrap框架的网格系统
form-control:是代表表单元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单布局</title>
<script src="../jquery/jquery.3.6.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<style>
form {
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 表单布局
水平表单
设置样式
<form class="form-horizontal" role="form">
form-control:是代表表单元素的样式
-->
<form action="#" class="form-horizontal" role="form">
<!-- 这里用divclass="form-group"包起来就
是代表接下来的label和表单控件是一组的
-->
<div class="form-group">
<!-- class="text-center" -->
<!-- 当label的for属性和input的id属性保持一致，点击label的文字就会自动聚焦 -->
<h2 align="center">信息收集表</h2>
<label for="uname" class="control-label col-md-4">姓名</label>
<div class="col-md-6">
<input type="text" id="uname" class="form-control">
</div>
</div>
<!-- 密码框 -->
<div class="form-group">
<!-- class="text-center" -->
<label for="upwd" class="control-label col-md-4">密码</label>
<div class="col-md-6">
<input type="password" id="upwd" class="form-control">
</div>
</div>
<!-- 复选框 -->
<div class="form-group">
<label class="control-label col-md-4">爱好</label>
<div class="col-md-6 col-md-offset-2" >
<label class="checkbox-inline"><input type="checkbox" name="hobby">唱歌 </label>
<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 for="city" class="control-label col-md-4">地点</label>
<div class="col-md-6">
<select class="form-control" id="city">
<option>请选择城市</option>
<option>上海</option>
<option>重庆</option>
<option>海南</option>
</select>
</div>
</div>
<!-- 简介-->
<div class="form-group">
<label for="remark" class="control-label col-md-4">简介</label>
<div class="col-md-6">
<textarea id="remark" class="form-control"></textarea>
</div>
</div>
<!-- 提交按钮 -->
<!-- 下拉框-->
<div class="form-group">
<div class="col-md-12 col-md-offset-6">
<button class="btn btn-warning">提交</button>
</div>
</div>
</form>
</body>
</html>
5.7.2.2 内联表单
将表单的控件都在一行内显示form-inline
注意label不会显示，存在的意义：如果没有为输入的控件设置label标签，屏幕阅读器将无法正常识别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap的表单</title>
<script src="../jquery/jquery.3.6.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<style>
form{
margin: 50px auto;
padding: 20px;
}
</style>
</head>
<body>
<!-- 内联表单： -->
<!-- form-inline表示在一行 -->
<form action="" class="form-inline">
<!-- 文本 -->
<div class="form-group">
<label for="uname">姓名</label>
<input type="text " id="uname" class="form-control" placeholder="请输入">
</div>
<!-- 密码 -->
<div class="form-group">
<label for="password">密码</label>
<input type="text " id="password" class="form-control">
</div>
<!-- 按钮 -->
<div class="form-group">
<button class="btn btn-info">按钮</button>
</div>
</form>
</body>
</html>
5.8缩略图
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面，缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容、按钮等。
缩略图添加字体图标样式步骤：
1、搜索bootstrap菜鸟教程
2、选择字体图标
3、看自己喜欢的字体图标，然后复制到span的元素作为类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap的模板</title>
<script src="../jquery/jquery.3.6.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<style>
.container{
margin: 50px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- 前三列：缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/bingmayong.png" alt="" style="width: 240px; height:200px">
<h3>明星</h3>
<p>陕西，家喻户晓</p>
<button class="btn-blue">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn-default">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<!-- 前三列：缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/qingdonglin.png" alt="" style="width: 240px; height:200px">
<h3>明星</h3>
<p>陕西，家喻户晓</p>
<button class="btn-blue">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn-default">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<!-- 前三列：缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/qiao.png" alt="" style="width: 240px; height:200px">
<h3>明星</h3>
<p>陕西，家喻户晓</p>
<button class="btn-blue">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn-default">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<!-- 前三列：缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/dongfangmingzhu.png" alt="" style="width: 240px; height:200px">
<h3>明星</h3>
<p>陕西，家喻户晓</p>
<button class="btn-blue">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn-default">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
s
</div>
</div>
</body>
</html>
5.9面板
默认的.panel组件，所做的只是设置基本的边框和内补来包含内容，
.panel-default:默认样式
.panel-heading:面板头
.panel-body:面板主体内容
<-->可以更换颜色</-->
<div class="panel panel-warning">
<div class="panel-heading">
.....
</div>
<div class="panel-body">
....
</div>
</div>
5.10 联合样式
5.10.1 导航
使用下拉和按钮组合可以制作导航
要点：
1、基本样式：.nav与nav-tabs、nav-pills组合制作导航
2、分类：
1）标签型导航nav-tabs
2）胶囊型导航nav-pills
3）堆栈导航nav-stacked
4）自适应导航nav-justified
5）面包屑导航breadcrumb :单独使用样式，直接加入到ol、ul中即 可，一般用于导航，主要是气的作用是甘肃用户现在所处页面的位置（当前位置
3、状态：
1）选中状态：active样式
2）禁用状态：disable
4、二级菜单
5.10.1.1 标签式导航
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs" >
<!-- li标签有a元素 -->
<li class="active">
<a href="#">牛奶</a>
</li>
<li >
<a href="#">牛奶</a>
</li>
<li >
<a href="#">牛奶</a>
</li>
<li >
<a href="#">牛奶</a>
</li>
</ul>
5.10.1.1 胶囊式导航
<p>胶囊式的导航菜单</p>
<ul class="nav nav-pills" >
<!-- li标签有a元素 -->
<li class="active">
<a href="#">牛奶</a>
</li>
<li >
<a href="#">牛奶</a>
</li>
<li >
<a href="#">牛奶</a>
</li>
<li >
<a href="#">牛奶</a>
</li>
</ul>
5.10.2 分页导航
分页导航分为页码导航和翻页导航
页码导航：ul标签上面加pagination
翻页导航：ul标签上加pager
5.10.2.1 分页
<h3>分页导航</h3>
<ul class="pagination">
<!-- active表示被选中状态 -->
<li class="active">
<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="#">»</a>
</li>
</ul>
5.10.2.2 翻页导航
<!-- 翻页导航 -->
<h3>翻页导航</h3>
<ul class="pager">
<!-- active表示被选中状态 -->
<li >
<a href="#">上一页</a>
</li>
<li >
<a href="#">下一页</a>
</li>
</ul>
5.10.3 下拉菜单
在使用bootstrap框架的下拉菜单的时候，必须使用两个js
<script src="../jquery/jquery.3.6.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
注意：
1、使用类名为dropdown或btn-group的div，包裹整个下拉框：
2、默认向下dropdown，向上弹起加入 dropup就可以
3、使用button作为父菜单，使用类名dropdown-toggle和自定义的data-toggle属性
4、在button中，使用font制作下拉箭头
5、下拉菜单项使用一个ul列表，并且定义一个类名为dropdown-menu
6、分组分割线：<li>添加类名divider来实现添加下拉分隔线的功能
7、分组标题：li添加类名dropdown-header来实现分组的功能
8、对齐方式：
1）dropdown-menu-left：左对齐 默认样式
2）dropdown-menu-right 右对齐
9、激活状态：active和禁用状态disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap的下拉菜单</title>
<script src="../jquery/jquery.3.6.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>
<body>
<!-- 1、必须有两个js文件 -->
<!-- 1、使用类名为dropdown或btn-group的div，包裹整个下拉框：
2、默认向下dropdown，向上弹起加入 dropup就可以
3、使用button作为父菜单，使用类名dropdown-toggle和自定义的data-toggle属性
4、在button中，使用font制作下拉箭头
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">
<!--2、使用button作为父菜单，使用类名dropdown-toggle和自定义的data-toggle属性-->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
电视节目
<!-- 3、设置下拉箭头 -->
<span class="caret"></span>
</button>
<!-- 4、下拉菜单项使用一个ul列表，并且定义一个类名为dropdown-menu -->
<!-- 分为标题内容、分割线等 -->
<ul class="dropdown-menu">
<!-- 5、分组标题：li添加类名dropdown-header来实现分组的功能 -->
<li class="dropdown-header">
动物世界
</li>
<!-- 6、给类别 -->
<li class="active"><a href="http://tv.cctv.com/lm/dwsj/" target="_blank">猩猩与大象</a></li>
<!-- 7、添加分割线 -->
<li class="divider"></li>
<li class="dropdown-header">
新闻联播
</li>
<li><a href="http://tv.cctv.com/lm/xwlbs" target="_blank">猩猩与大象</a></li>
</ul>
</div>
</body>
</html>
5.10.4 模态框
模态框是覆盖在父窗体上的子窗体，通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些胡东。子窗体可提供信息、交互等
5.10.4.1 用法
1、通过data属性：在控制器元素上设置属性data-toggle="modal",同时设置data-target="#identifier".modal(options)或者href="identifier"来指定要切换的特定的模态框
2、通过javascript：使用这种技术，可以通过javascript来调用id=：identifier的模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap的模板</title>
<script src="../jquery/jquery.3.6.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>
<body>
<!-- 操作模态框 -->
<!-- 1、通过data属性：在控制器元素上设置属性data-toggle="modal",同时设置data-target="#identifier".modal(options)或者href="identifier"来指定要切换的特定的模态框 -->
<!--
打开模态框
$('#identifier').modal('show')
关闭模态框
$('#identifier').modal('hide')
-->
<!-- 按钮设置的属性表明和模态框相关 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">模态框</button>
<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">用户信息添加</h4>
</div>
<!-- 添加一个表单在这儿 -->
<div class="modal-body">
<form action="" class="form-horizontal" role="form">
<!-- 水平表单 -->
<!-- 姓名 -->
<div class="form-group">
<label for="uname" class="col-md-2 control-label">姓名：</label>
<div class="col-md-6">
<input type="text" id="uname" class="form-control ">
</div>
</div>
<!-- 密码 -->
<div class="form-group">
<label for="upwd" class="col-md-2 control-label">密码：</label>
<div class="col-md-6">
<input type="text" id="upwd" class="form-control">
</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="sub">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- 2、通过javascript：使用这种技术，可以通过javascript来调用id=：identifier的模态框 -->
<!-- 打开按钮 -->
<!-- <button class="btn btn-primary" id="btn">打开模态框</button> -->
<script>
$('#btn').click(function () {
// 找到要打开的模态框事件的id
$('#myModal').modal('show')
})
// 2、给关闭按钮添加点击事件
$('#sub').click(function(){
// 关闭模态框
$('#myModal').modal('hide')
})
</script>
</body>
</html>
扫一扫
2284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
