前端技术--Boot Strap
Boot Strap
1.Boot Strap的引言
1.Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得web开发更加快捷。
2.Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目
3.Bootstrap是颇受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。
响应式布局：屏幕自适应 前端页面实现屏幕自适应
2.Boot Strap环境搭建
1.下载bootstrap相关资料 说明：bootstrap第3.3.7版本
https://v3.bootcss.com/getting-started/#download
2.下载完成之后解压bootstrap压缩包
css bootstrap核心css文件 bootstrap.css 核心css bootstrap.min.css(压缩css)
fonts 用来存放bootstrap字体图标的文件夹
js bootstrap.js 是bootstrap核心js bootstrap.min.js(压缩js)
3.将bootstrap文件夹全部放入项目中
4.页面使用bootstrap
<!--获得更好的响应式支持-->
<meta name="viewport" content="width=device-width, initial-scale=1">移动设备优先
<!--引入bootstrap核心css文件-->
<link rel="stylesheet" href="../boot/css/bootstrap.min.css">
3.Boot Strap容器
<!--布局容器 container : 两边存在一定padding-->
<div class="container" style="border: 1px red solid;"></div>
<!--布局容器 container-fluid ：默认使用当前页面的100%宽度-->
<div class="container-fluid" style="border: 1px blue solid;"></div>
注意：这两种容器不能互相嵌套，且使用bootstrap都要引入container
4.排版
4.1标题
<!--标题 bootstrap为h1~h6都设置了样式-->
<h1>bootstrap</h1>
<h2>bootstrap</h2>
......
<!--副标题 内容占容器内容的80%大小-->
<h1>班级管理系统<small>V1.2</small></h1>
<h2>班级管理系统<small>V1.2</small></h2>
......
4.2页面主体
1.Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
2.这些属性直接赋予 <body> 元素和所有段落元素。
3.另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
总结：bootstrap直接将body和p全局设置字体为14px
4.2.1中心内容
<!--通过添加.lead类可以将段落内容突出展示-->
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. <span class="lead">Cum</span> sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
</p>
4.3内联文本元素
4.3.1标记文本（Mark）
<!--mark标签 高亮显示-->
<p>this is springboot, <mark>springboot</mark> is a very good framework!</p>
4.3.2删除文本（del/s）
<!--对于被删除的文本使用 <del> 标签或者直接使用<s>标签。-->
<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>
4.3.3插入文本（ins/u）
<!--可以使用<ins>标签或者<u>标签-->
<ins>This line of text is meant to be treated as an addition to the document.</ins>
<u>This line of text will render as underlined</u>
4.3.4字体小号、加粗、斜体（small、strong、em）
<!--小号文本，默认为父容器文本的85%-->
<p>my name is fm,<small>小号文本</small></p>
<!--着重文本 strong-->
<p>my name is <strong>fm</strong></p>
<!--斜体文本 em-->
<p>my name is <em>fm</em></p>
4.4对齐
<!--文本对齐方式
left right center justify(超出容器自动换行) nowrap(超出容器也不换行，增加滚动条始终一行展示)-->
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
4.5缩略语
<!--缩略语 abbr-->
<p><abbr title="........">spring</abbr> framework is open source for javaEE</p>
4.6地址
<!--让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。-->
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address
4.7引用
<!--引用 blockquote-->
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
4.8列表
<!--无序列表 ul>li 有序列表 ol>li list-unstyled 无样式列表 list-inline 一行列表 -->
<ul>
<li>...</li>
</ul>
--------------------------------------------------------------------------------------------
<ol>
<li>...</li>
</ol>
5.Boot Strap栅格系统
栅格系统：主要作用 用来完成bootstrap页面布局
栅格系统中流式布局
存在行的概念：将页面中拆分成一行一行
存在列的概念：bootstrap栅格系统将页面中拆分的一行最多分为12列 默认 12等分列
bootstrap为什么默认分为12列？便于我们计算，方便我们日后排版 （12计算 2*6 3*4 4+8 3+9）
使用栅格系统注意事项：
1.栅格系统必须包含在容器布局中 .container/.container-fluid 100%
<!--栅格系统基本使用-->
<div class="container-fluid">
<div class="row">
12column (.col-xs .col-sm .col-md .col-lg)
</div>
</div>
<!--栅格系统的分配（一行12等分）-->
<div class="row">
<!--一行最多12个列-->
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
......
</div>
<!--栅格系统拆分-->
<div class="row">
<!--一行最多12个列-->
<div class="col-sm-4 aa">4</div>
<div class="col-sm-4 aa">4</div>
<div class="col-sm-4 aa">4</div>
</div>
<!--栅格系统嵌套-->
<div class="row">
<div class="col-sm-2 aa">2</div>
<div class="col-sm-8 aa">
<div class="col-sm-10 bb">
aaa
</div>
<div class="col-sm-2 bb">
bb
</div>
</div>
<div class="col-sm-2 aa">2</div>
</div>
<!--栅格系统列偏移-->
<div class="row">
<div class="col-sm-4 aa col-sm-offset-8">aaa</div>
</div>
<!--栅格系统多余列-->
<div class="row">
<!--占4份-->
<div class="col-sm-4 aa">aaa</div>
<!--占4份-->
<div class="col-sm-4 aa">bbb</div>
<!--超过另起一行-->
<div class="col-sm-8 aa">bbb</div>
<!--没有超过12等份，在同一行-->
<div class="col-sm-4 aa">ccc</div>
</div>
6.Bootstrap表格
<!--基本表格 table
table-stripedt(条纹状) table-bordered(边框) table-hover(鼠标悬停变色) table-condensed(紧缩表格)
-->
<table class="table .table-stripedt .table-bordered .table-hover">
<tr>
<th>编号</th>
......
</tr>
<tbody>
<tr>
<td>1</td>
......
</tr>
</tbody>
</table>
7.BootStrap图片、按钮、表单
7.1按钮的使用
<!--3种基本按钮 btn btn-default(默认样式)-->
<input class="btn btn-default" type="button" value="按钮">
<button class="btn btn-default">按钮</button>
<a href="" class="btn btn-default">按钮</a>
<!--不同样式按钮 btn btn-xxx primary info danger success warning link-->
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">按钮</button>
<!--不同尺寸按钮 btn btn-default btn-xxx lg 大 md 默认 sm 小 xs 超小-->
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-primary btn-md">默认按钮</button>
<button class="btn btn-primary btn-sm">小按钮</button>
<button class="btn btn-primary btn-xs">超小按钮</button>
<!--块级按钮 btn btn-default btn-block-->
<button class="btn btn-primary btn-block">小按钮</button>
<!--控制状态按钮 .active .disabled-->
<a href="" class="btn btn-primary active">激活状态</a>
<a href="" class="btn btn-primary disabled">禁用状态</a>
7.2图片的使用
<!--bootstrap提供img样式 正方形img-rounded 圆形img-circle 边框img-thumbnail-->
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
7.3表单的使用
<!--垂直表单-->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!--水平表单 form-horizontal
1.form加入class="form-horizontal"
2.在form-group中使用栅格系统
3.label必须加入class="control-label"
-->
<form action="" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">用户名：</label>
<div class="col-sm-10">
<input type="text" id="name" class="form-control">
</div>
</div>
<div class="form-group">
<label for="pwd" class="col-sm-2 control-label">密码：</label>
<div class="col-sm-10">
<input type="text" id="pwd" class="form-control">
</div>
</div>
</form>
8.Bootstrap组件使用
8.1bootstrap图标
<!--使用字体图标
1.所有字体图标都有一个基类 glyphicon 使用对应图标类
2.不能与任何bootstrap中类联合使用，必须单独创建一个span标签嵌套，通过span进行图标使用
3.为了设置正确的内补（padding），务必在图标和文本之间添加一个空格
-->
<p class="text-info">
bootstrap is good <span class="glyphicon glyphicon-minus"></span>
</p>
---------------注意---------------
<!--后续组件使用引入问题 注意引入顺序-->
<!--1.引入bootstrap核心css文件-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!--2.引入jquery核心js文件-->
<script src="../js/jquery-3.5.1.min.js"></script>
<!--3.引入bootstrap核心js文件-->
<script src="../js/bootstrap.min.js"></script>
<!--如何判断jquery的核心js是否引入成功？-->
<script>
$(function(){
alert();//查看浏览器是否弹出提示框
})
</script>
<!--如何判断bootstrap核心js是否引入成功？-->
浏览器-->检查元素-->Network-->Name-->Status-->200
8.2下拉选项框（重要）
<!--开发一个下拉菜单
1.通过dropdown容器包裹 下拉按钮和下拉菜单
2.下拉菜单加入dropdown-menu样式
3.下拉按钮加入data-toggle="dropdown" 触发菜单展示和隐藏
-->
<!--基本实例 dropdown(下拉菜单) dropup(上拉菜单)-->
<div class="dropdown">
<!--下拉按钮-->
<button class="btn btn-default" data-toggle="dropdown">
选择课程
<span class="caret"></span>
</button>
<!--下拉菜单 ul>(li>a)*3-->
<ul class="dropdown-menu">
<li><a href="">SpringBoot</a></li>
<li><a href="">SpringMVC</a></li>
<li class="divider"></li> //分割线
<li class="disabled"><a href="">SpirngCloud</a></li>//禁用
</ul>
</div>
<!--下拉菜单中使用标题 dropdown-header-->
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
选择课程门类
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Spring Stack</li>
<li><a href="">Spring Boot</a></li>
<li><a href="">Spring MVC</a></li>
<li><a href="">Spring Cloud</a></li>
<li><a href="">Spring Data</a></li>
<li class="divider"></li> //分割线
<li class="dropdown-header">NoSql Stack</li>
<li><a href="">Redis</a></li>
<li><a href="">MongoDB</a></li>
<li><a href="">Cassendar</a></li>
</ul>
</div>
8.3按钮组
<!--按钮组组件的基本使用 btn-group-->
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<!--按钮工具栏 btn-toolbar 用于联合使用-->
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-success">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-info">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">Left</button>
</div>
</div>
<!--调整一组按钮的尺寸 btn-group-lg btn-group btn-group-sm btn-group-xs-->
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-danger">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<!--按钮嵌套-->
<div class="btn-group">
<a href="" class="btn btn-info">添加</a>
<a href="" class="btn btn-danger">删除</a>
<!--按钮组嵌套-->
<div class="btn-group">
<button class="btn btn-warning" data-toggle="dropdown">
选择课程
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">Redis</a></li>
<li><a href="">BootStrap</a></li>
<li><a href="">Spring</a></li>
</ul>
</div>
</div>
<!--垂直排列的按钮组-->
<div class="btn-group-vertical">
......
</div>
<!--按钮自适应屏幕亮度 btn-group-justified-->
<div class="btn-group btn-group-justified">
......
</div>
<!--分裂式下拉菜单 点击下拉符号有效-->
<div class="dropdown">
<button class="btn btn-info">选择爱好</button>
<button class="btn btn-info" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
8.4输入框组
<!--输入框input组-->
<!--输入框实例 左 右 两端-->
<div class="input-group">
<span class="input-goup-addon">@</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-goup-addon">@</span>
</div>
<div class="input-group input-group-sm">
<span class="input-goup-addon">@</span>
<input type="text" class="form-control">
<span class="input-goup-addon">.com</span>
</div>
<div class="input-group input-group-lg">
<span class="input-goup-addon">http://example.com/</span>
<input type="text" class="form-control">
<span class="input-goup-addon">.com</span>
</div>
<!--输入框组放入其他元素 checkbox radio ... -->
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
<!--放入按钮时需要使用input-group-btn 不能使用input-group-addon-->
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary">GO</button>
</span>
<input type="text" class="form-control">
</div>
<!--放入按钮时需要使用input-group-btn 不能使用input-group-addon-->
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">Redis</a></li>
<li><a href="">Spring</a></li>
<li><a href="">ES</a></li>
</ul>
</span>
<input type="text" class="form-control">
</div>
8.5导航
<!--基本导航 nav nav-tabs 标签式导航-->
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li><a href="">Course</a></li>
<li><a href="">About</a></li>
</ul>
<!--胶囊式标签页 nav nav-pills 垂直排列（堆叠） nav-stacked-->
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="">Home</a></li>
<li><a href="">Course</a></li>
<li><a href="">About</a></li>
</ul>
<!--自适应父容器宽度标签页 nav-justified-->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="">Home</a></li>
<li><a href="">Course</a></li>
<li><a href="">About</a></li>
</ul>
<!--带有下拉菜单的标签页-->
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li><a href="">Course</a></li>
<li class="dropdown">
<a data-toggle="dropdown">
关于我们
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href=""></a></li>
</ul>
</li>
</ul>
8.6导航条
<!--基本导航条实例-->
<!--<nav class="navbar ...">
固定在顶部 navbar-fixed-top 固定在底部 navbar-fixed-buttom
静止在顶部 navbar-static-top
黑色导航条 navbar-inverse
-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!--用来屏幕自适应-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--品牌文字-->
<a class="navbar-brand" href="#">Brand</a>
<!--品牌图标-->
<a class="navbar-brand" href="#">
<img src="..." style="width:20px;height:20px">
</a>
</div>
<!-- 导航条中加入的其他组件 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!--放入超链接、文本-->
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<!--放入下拉框-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<!--放入表单-->
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!--靠右显示navbar-right-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
8.7路径导航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
8.8分页工具栏
<!--基本分页工具栏-->
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
注意：这里的分页只是简单的演示，实际运用请安装相应的插件
8.9标签
<!--基本标签 label label-default label-xxx info warning success danger primary-->
<h3>Example heading <span class="label label-default">New</span></h3>
8.10徽章
<!--徽章 <span class="badge">-->
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
8.11缩略图
<!--基本缩略图使用-->
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
</div>
<!--自定义缩略图内容 类似于京东商品-->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>
<a href="#" class="btn btn-primary" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
</div>
8.12 警告框
<!--构建警告框-->
<div class="alert alert-danger">this is message</div>
<div class="alert alert-info">this is message</div>
<div class="alert alert-warning">this is message</div>
<!--具有可以关闭功能的警告框-->
<div class="alert alert-danger">
<button class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<a href="" class="alert-link">Warning!</a> Better check yourself, you're not looking too good.
</div>
8.13进度条
<!--创建一个进度条 progress progress-bar-xxx success danger info waring-->
<div class="progress">
<div class="porgress-bar progress-bar-striped active" style="width:30%;">
30%
</div>
</div>
8.14列表组
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
8.15面板
<!--面板组件 panel panel-default panel-xxx primary success danger info warning-->
<div class="panel panel-warning">
<!--面板标题-->
<div class="panel-heading">
<h3 class="panel-title">
编辑用户信息
<span class="glyphicon glyphicon-user"></span>
</h3>
</div>
<!--面板内容-->
<div class="panel-body">
this is a panel
<!--该div中可以加入span-->
</div>
<!--列表组、table直接放在面板内容之外就可以了，此外可以没有面板内容-->
<!--脚注-->
<div class="panel-footer">
123@abc.com
</div>
</div>
9.javascript插件
9.1模态框 modal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框组件</title>
<!--引入bootstrap核心css-->
<link rel="stylesheet" href="../boot/css/bootstrap.min.css">
<!--引入jquery核心js-->
<script src="../boot/js/jquery-3.5.1.min.js"></script>
<!--引入bootstrap核心js-->
<script src="../boot/js/bootstrap.min.js"></script>
<script>
$(function(){
//页面加载之后立即展示模态框
$('#myModal').modal({
show: true,//展示模态框
backdrop: 'static',//点击旁边区域不关闭模态框
keyboard: false//按下键盘上esc关闭对话框
});
});
</script>
</head>
<body>
<!--模态框：对话框（dialog） modal
使用注意事项
1.在一张页面中不支持同时打开多个模态框，千万不要在一个模态框上重叠另一个模态框
2.务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
-->
<!--基本实例 modal 方法的使用 .modal(options)-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!--模态框标题-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">用户信息</h4>
</div>
<!--中心内容-->
<div class="modal-body">
<p>One fine body…</p>
<!--可以放入文本、表单、表格等-->
</div>
<!--脚注-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
9.2标签页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的使用</title>
<!--引入bootstrap核心css-->
<link rel="stylesheet" href="../boot/css/bootstrap.min.css">
<!--引入jquery核心js-->
<script src="../boot/js/jquery-3.5.1.min.js"></script>
<!--引入bootstrap核心js-->
<script src="../boot/js/bootstrap.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
//调用选项卡展示
$("#stus").tab('show');
});
//事件使用 对应组件选择器.on（事件名，事件处理函数名）
$("a[data-toggle='tab']").on('show.bs.tab', function () {
});
});
</script>
</head>
<body>
<!--标签页-->
<!--标签选项卡-->
<ul class="nav nav-tabs">
<li class="active"><a href="#userlist" id="user" data-toggle="tab">用户管理</a></li>
<li><a href="#stulist" id="stus" data-toggle="tab">学生管理</a></li>
</ul>
<!--标签选项卡面板-->
<div class="tab-content">
<div class="tab-pane active" id="userlist">用户列表</div>
<div class="tab-pane" id="stulist">学生列表</div>
</div>
<br><br>
<button id="btn" class="btn btn-danger">选项卡展示</button>
</body>
</html>
10.页面组件整合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的使用</title>
<!--引入bootstrap核心css-->
<link rel="stylesheet" href="../boot/css/bootstrap.min.css">
<!--引入jquery核心js-->
<script src="../boot/js/jquery-3.5.1.min.js"></script>
<!--引入bootstrap核心js-->
<script src="../boot/js/bootstrap.min.js"></script>
<script>
$(function () {
$("#saveBtn").click(function () {
$("#saveUserModel").modal({
show: true
})
})
$("#saveBtn1").click(function () {
$("#saveUserModel").modal({
show: true
})
})
})
</script>
</head>
<body>
<!--导航条-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!--屏幕自适应-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">员工管理系统 <samll>V1.0</samll></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">欢迎，<sapn class="text-info">冯猛</sapn></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">个人中心 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">我的积分</a></li>
<li><a href="#">我的信息</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">修改密码</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--页面中心内容-->
<div class="row">
<div class="col-sm-2">
<!--菜单组件-->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
用户管理
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item"><a href="">用户列表</a></li>
<li class="list-group-item"><a href="">增加用户</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="empTitle">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#empContent">
员工管理
</a>
</h4>
</div>
<div id="empContent" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item"><a href="">员工列表</a></li>
<li class="list-group-item"><a href="">增加员工</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-10">
<!--中心内容-->
<!--标签页-->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">用户列表</a></li>
<li role="presentation"><a id="saveBtn1">添加用户</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<!--添加用户表格-->
<table class="table table-bordered table-hover table-striped">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>21</td>
<td>张三</td>
<td>23</td>
<td>2012-12-12</td>
<td>2100</td>
<td><a href="" class="btn btn-danger btn-xs">删除</a><a href="" class="btn btn-info btn-xs">修改</a></td>
</tr>
<tr>
<td>22</td>
<td>张三</td>
<td>23</td>
<td>2012-12-12</td>
<td>2100</td>
<td><a href="" class="btn btn-danger btn-xs">删除</a><a href="" class="btn btn-info btn-xs">修改</a></td>
</tr>
<tr>
<td>23</td>
<td>张三</td>
<td>23</td>
<td>2012-12-12</td>
<td>2100</td>
<td><a href="" class="btn btn-danger btn-xs">删除</a><a href="" class="btn btn-info btn-xs">修改</a></td>
</tr>
</table>
<ul class="list-unstyled">
<li><button class="btn btn-success btn-sm" id="saveBtn">添加用户信息</button></li>
</ul>
<div class="pull-right">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<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="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
</div>
</div>
</div>
<!--添加用户的对话框-->
<div class="modal fade" id="saveUserModel" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">保存用户信息</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</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>
</div>
</div>
</body>
</html>
效果如下：
浙公网安备 33010602011771号