1.bootstrap简介
- Bootstrap来自 Twitter,是目前最受欢迎的响应式前端框架。
1. Bootstrap的优势
- 移动设备优先:框架包含了贯穿于整个库移动设备优先的样式
- 浏览器支持:所有的主流浏览器都支持 Bootstrap。
- 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
2.Bootstrap的使用
1.表格
-
引入css:
-
标签
- table
- caption:表格介绍或总结
- thead:标题行(第一行)、th:居中加粗(用于thead)
- tbody:表格主体
- tr、td
-
类样式
- .table:基本样式,只有横线
- .table-striped :主体行中隔行变色
- .table-bordered :添加边框
- .table-hover :悬停高亮显示
- .table-condensed :紧凑表格
- .table-responsive:设置为响应式表格,小于768px,出现边框。
-
情景色类样式:
适合应用在:th、tr、td中
-
active:激活效果
-
info:表示普通的提示信息
-
.success:绿色,积极颜色
-
.warning :警告,黄色
-
.danger:表示危险,红色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-luUwGXzy-1612149097012)(C:\Users\HUSKY\AppData\Roaming\Typora\typora-user-images\image-20210130165715027.png)]
<!--定义类样式-->
<table class="table table-striped table-bordered table-hover ">
<caption>信息表</caption> <!--信息介绍-->
<thead><!--标题行-->
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr class="active"><!--主体第一行-->
<td>active</td>
<td>123</td>
<td>男</td>
</tr>
</tbody>
</table>
2.表单
- .form-inline:让所有表单元素居于一行,小于768px时还有成移动端样式。
<body style="padding:100px">
<form action="" class="form-inline">
<!-- <form action="" class="form-inline">内联样式 -->
<div class="form-group"><!--组-->
<label>邮箱</label>
<input type="email" class="form-control" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="请输入密码">
</div>
<button class="btn btn-primary">提交</button>
</form>
</body>
2.5表单控件
1.输入框
<form>
<div class="form-group">
<label for="">输入框</label>
<input type="text" class="form-control" placeholder="请输入文本...">
</div>
</form>
2.文本框
<div class="form-group">
<label>文本框</label>
<textarea cols="30" rows="10" class="form-control"></textarea>
</div>
3.复选框
- checkbox:默认;
- checkbox-inline:内联
<div class="checkbox">
<label>
<input type="checkbox">抽烟
</label>
4.复选按钮
- 基本不用复选框
<div class="btn-group" data-toggle="buttons">
<!-- data-toggle="buttons":隐藏选中框 -->
<label class="btn btn-primary" >
<input type="checkbox">音乐
</label>
<label class="btn btn-primary">
<input type="checkbox">篮球
</label>
<label class="btn btn-primary">
<input type="checkbox">游泳
</label>
</div>
<!-- 引入js文件 -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
5.单选框
<label class="radio" >
<input type="radio" name="sex">男
</label>
<label class="radio">
<input type="radio" name="sex">女
</label>
6.单选按钮
<div class="btn btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="sex">男
</label>
<label class="btn btn-primary">
<input type="radio" name="sex">女
</label>
</div>
3.按钮
- btn btn-default btn-lg
<body style="padding:100px">
<!-- 按钮样式与大小 -->
<button class="btn btn-default">默认按钮(笔记本)</button>
<button class="btn btn-primary btn-lg">主要超大按钮(大屏台式机)</button>
<button class="btn btn-success btn-sm">成功小按钮(平板)</button>
<button class="btn btn-info btn-xs">信息超小按钮(手机)</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-link">连接按钮</button>
<!-- 按钮状态 -->
<button class="btn btn-default">默认按钮</button>
<!-- 激活状态:呈现为被按压的外观(深色的背景、深色的边框、阴影)-->
<button class="btn btn-default active">激活按钮</button>
<button class="btn btn-default" disabled>禁用按钮</button>
</body>
4.图片
- .img-rounded:添加 border-radius:6px 来获得图片圆角。
- .img-circle:添加 border-radius:50% 来让整个图片变成圆形。
- .img-thumbnail:添加一些内边距(padding)和一个灰色的边框
- .img-responsive:
<img src="../imgs/126.jpg" class="img-rounded">
<img src="../imgs/126.jpg" class="img-circle" >
<img src="../imgs/126.jpg" class="img-thumbnail" style="padding:10px">
<!-- <img src="../imgs/hudei.jpg" class="img-responsive" width="100%">响应式图片,可随窗口变化 -->
5.下拉菜单
- 外部容器绑定:dropdown;按钮添加事件源:data-toggle=“dropdown”;ul绑定:dropdown-menu
<body>
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">拉钩教育<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">java</a></li>
<li><a href="#">html</a></li>
<li><a href="#">c++</a></li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
6.分页组件
- pagination
<ul class="pagination " ><!--pager-->
<li class="previous"><a href="#">«</a></li>
<li class="active"><a href="#" >1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
7.栅格系统
-
container、row
-
bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子
-
当浏览器大小发生变化的时候,我们可以控制每行的元素占用几个格子,从而达到响应式的效果
<div class="container">
<div class="row">
<!-- col-lg-3 当大屏幕时,一个div占3份,一行显示4个div -->
<!--依次类推-->
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
</div>
</div>
8.缩略图组件
-
thumbnail
-
配合响应式的栅格系统。
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="../imgs/126.jpg" alt="">
</div>
</div>
</div>
</div>
- 在此基础删实现定义内容
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="../imgs/126.jpg" alt="">
<div class="caption"><!--介绍,让文字不在紧贴边框-->
<h3>图文并茂</h3>
<p>这是图文的介绍区</p>
<p>
<a href="#" class="btn btn-primary">试看</a>
<a href="#" class="btn btn-warning">购买</a>
</p>
</div>
</div>
</div>
</div>
</div>
9.模态框组件
-
触发按钮绑定:
- 触发类型data-toggle=“modal” ;
- 触发节点:data-target="#myModal"
-
data-backdrop=“static” 点击黑灰色背景,不会关闭模态框
-
定义模态框组件(modal)、声明窗口(modal-dialog)、声明内容(modal-content)、标题(modal-title)、信息(modal-body、尾部(modal-footer)
-
取消按钮绑定:data-dismiss=“modal”
<body>
<button class="btn btn-warning" data-toggle="modal" data-target="#mymodal">弹窗</button>
<!-- 声明定义模态框组件 -->
<div class="modal" id="mymodal" data-backdrop="static">
<!-- 窗口声明 -->
<div class="modal-dialog">
<!-- 内容声明 -->
<div class="modal-content">
<!-- 1.框的标题 -->
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">友情提示</h4>
</div>
<!-- 2.框内信息 -->
<div class="modal-body">
服务器错误,请稍后再试!
</div>
<!-- 3.框的按钮 -->
<div class="modal-footer">
<button class="btn btn-info">确定</button>
<button class="btn btn-default" data-dismiss="modal">取消
</button>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
3.案例
1.首页轮播大图
- data-ride=“carousel”:自动轮播5s一次
- data-slide-to:向轮播底部创建一个原始滑动索引,滑动特定索引
- data-slide: 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。图标样式在官网查阅
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 滚动圆点区 -->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<!-- 图片区 -->
<div class="carousel-inner">
<div class="item active">
<img src="../imgs/w1.jpg">
</div>
<div class="item">
<img src="../imgs/早坂爱.png">
</div>
<div class="item">
<img src="../imgs/w2.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- 左右切换 -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
2.响应式导航条
<body>
<!-- 默认导航条样式 -->
<div class="navbar navbar-default">
<!-- 响应式容器 -->
<div class="container">
<!-- 导航栏头部 -->
<div class="navbar-header">
<a href="#" class="navbar-brand">XX管理系统</a>
<!-- data-toggle="collapse" 数据切换的事件,特效是折叠-->
<!-- data-target="#nav" 折叠效果的目标是下面的#nav容器-->
<button class="navbar-toggle" data-toggle="collapse" data-target="#nav">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 导航项 -->
<div id="nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"> <span class="glyphicon glyphicon-home">
</span>主页</a> </li>
<li> <a href="#"> <span class="glyphicon glyphicon-camera">
</span> 产品</a> </li>
<li> <a href="#"> <span class="glyphicon glyphicon-tint">
</span>竞争</a> </li>
<li> <a href="#"> <span class="glyphicon glyphicon-earphone">
</span> 联系我们</a> </li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
产品