03_02_前端 Bootstrap详解
2024-06-14 08:34:37
前言
文章内容输出来源：拉勾教育Java就业训练营
上一阶段前端 Bootstrap详解
bootstrap
什么是Bootstrap？
- Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。
- Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。
为什么使用 Bootstrap？
- 移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。
- 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
- 也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
- 浏览器支持：所有的主流浏览器都支持 Bootstrap。
- 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
- 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件，易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的。
下载与使用
中文官网：https://www.bootcss.com/
英文官网：http://getbootstrap.com/
下载好的，压缩包解压出来。就得到了bootstrap的资源文件了,分别是css、js、font字体，全部放在项目的根目录即可。
测试：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:100px"><h1>Hello,Bootstrap!</h1><button class="btn btn-primary">学习充电</button><button class="btn btn-success">极速入职</button></body>
</html>
效果图：
Bootstrap的使用
表格
和之前的表格相比，标签更丰富更加语义化，效果更佳美观
丰富的标签
- <table> 为表格添加基础样式
- <thead> 表格标题行的容器元素（<tr>）
- <tbody> 表格主体中的表格行的容器元素（<tr>）
- <tr> 表格行
- <td> 默认的表格单元格。
- <th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用。
- <caption> 关于表格存储内容的描述或总结。
好看的类样式
- .table 为任意 <table> 添加基本样式 (只有横向分隔线)
- .table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色
- .table-bordered 为所有表格的单元格添加边框
- .table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
- .table-condensed 让表格更加紧凑
情景色类样式
适合应用在<th>、<tr>，<td>
- .active 激活效果（悬停颜色）
- .success 表示成功或积极的动作
- .info 表示普通的提示信息或动作
- .warning 表示警告或需要用户注意
- .danger 表示危险或潜在的带来的负面影响的动作
响应式表格
- 表格的父元素设置响应式，小于768px，出现边框
- 测试:
<table class="table table-responsive"><caption>经营产品大全</caption><thead><tr><th>产品</th><th>付款日期</th><th>状态</th></tr></thead><tbody><tr class="info"><td>产品1</td><td>2020-1-1</td><td>待发货</td></tr><tr class="active"><td>产品2</td><td>2020-1-2</td><td>已发货</td></tr><tr class="success"><td>产品3</td><td>2020-1-3</td><td>未付款</td></tr><tr class="warning"><td>产品4</td><td>2020-1-4</td><td>已退货</td></tr><tr class="danger"><td>产品5</td><td>2020-1-5</td><td>已退款</td></tr></tbody>
</table>
效果图:
表单
表单布局
默认布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:100px;"><form 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="passowd" class="form-control" placeholder="请输入密码"></div><div class="form-group"><button class="btn btn-primary">提交</button></div></form>
</body>
</html>
内联布局
- 让所有表单元素居于一行
- 注意：当小于768px时,会自动还原成移动端样式.
<!-- 修改表单的class-->
<form class="form-inline">
表单控件
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:100px;"><form ><!-- 输入框--><div class="form-group"><label>输入框</label><input type="text" class="form-control" placeholder="请输入文本..."></div><!-- 文本框--><div class="form-group"><label>文本框</label><textarea class="form-control" cols="30" rows="5"></textarea></div><!-- 复选框--><div class="checkbox"><label><input type="checkbox"> 抽烟</label></div><div class="checkbox"><label><input type="checkbox"> 喝酒</label></div><hr><div class="checkbox-inline"><label><input type="checkbox"> 洗澡</label></div><div class="checkbox-inline"><label><input type="checkbox"> 烫头</label></div><hr><!--复选按钮--><div class="btn-group" 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><label class="btn btn-primary"><input type="checkbox"> 电脑</label></div><hr><!--单选框--><label class="radio"><input type="radio" name="sex"> 男</label><label class="radio"><input type="radio" name="sex"> 女</label><hr><label class="radio-inline"><input type="radio" name="gender"> 男</label><label class="radio-inline"><input type="radio" name="gender"> 女</label><hr><!--单选按钮--><div class="btn-group" data-toggle="buttons"><label class="btn btn-primary"><input type="radio" name="gender"> 男</label><label class="btn btn-primary"><input type="radio" name="gender"> 女</label></div></form><!--调用jquery 和对应的bootstrap中js部分的样式--><script src="js/jquery-3.3.1.min.js"></script><script src="js/bootstrap.min.js"></script>
</body>
</html>
按钮
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:100px;"><button class="btn btn-default">默认按钮</button><button class="btn btn-primary">主要按钮</button><button class="btn btn-success">成功按钮</button><button class="btn btn-info">信息按钮</button><button class="btn btn-warning">警告按钮</button><button class="btn btn-danger">危险按钮</button><button class="btn btn-link">连接按钮</button><hr><button class="btn btn-primary btn-lg">超大按钮（高清大屏台式机）</button><button class="btn btn-primary">大按钮（笔记本屏幕）</button><button class="btn btn-primary btn-sm">小按钮（平板电脑）</button><button class="btn btn-primary btn-xs">超小按钮（手机）</button><hr><!--激活状态：按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）;禁用状态：当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变;--><button class="btn btn-default">默认按钮</button><button class="btn btn-default active">默认按钮</button><button class="btn btn-default" disabled>禁用按钮</button>
</body>
</html>
图片
- .img-rounded：添加 border-radius:6px 来获得图片圆角。
- .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
- .img-thumbnail：添加一些内边距（padding）和一个灰色的边框
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 20px;"><img src="img/2.jpg" class="img-rounded" width="33%"><img src="img/2.jpg" class="img-circle" width="33%"><img src="img/2.jpg" class="img-thumbnail" width="33%">
</body>
</html>
响应式图片
根据页面进行调整图片大小
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 20px;;"><img src="img/2.jpg" class="img-responsive">
</body>
</html>
下拉菜单组件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 30px;"><div class="dropdown"><button class="btn btn-primary" data-toggle="dropdown">拉勾教育 <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">前沿技术</a></li><li><a href="#">名师制作</a></li><li><a href="#">24小时导师</a></li></ul></div><script src="js/jquery-3.3.1.min.js"></script><script src="js/bootstrap.min.js"></script>
</body>
</html>
- 用法的关键核心
- 外围容器使用 class="dropdown"包裹
- 内部点击按钮事件绑定 data-toggle=“dropdown”
- 菜单元素使用 class=“dropdown-menu”
分页组件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 20px;"><ul class="pagination"><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></body>
</html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head><body style="padding: 20px;"><!-- 样式修改 --><ul class="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>
</body>
</html>
栅格系统
- bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子
- 当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果
显示屏幕的扩大和缩小. 实现如下效果
案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<style>.a {height: 50px;border: 1px solid black;background-color: #eeeeee;}
</style><body><div class="container"><div class="row"><!-- 当大屏幕时，一个div占3份，一行显示4个div --><!-- 当中屏幕时，一个div占4份，一行显示3个div --><!-- 当小屏幕时，一个div占6份，一行显示2个div --><!-- 超小屏幕时，一个div占12份，一行显示1个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>
</body></html>
缩略图组件
- 配合响应式的栅格系统
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body><div class="container"><div class="row"><div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail"><img src="img/2.jpg"></div></div><div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail"><img src="img/2.jpg"></div></div><div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail"><img src="img/2.jpg"></div></div><div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail"><img src="img/2.jpg"></div></div></div></div>
</body>
</html>
- 自定义内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body><div class="container"><div class="row"><div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail"><img src="img/2.jpg"><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 class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail"><img src="img/2.jpg"><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 class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail"><img src="img/2.jpg"><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 class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail"><img src="img/2.jpg"><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>
</body>
</html>
2.9 模态框组件
- data-toggle=“modal” 触发类型:模态框modal
- data-target="#myModal" 触发的节点
- data-backdrop=“static” 点击黑灰色背景，不会关闭模态框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:20px;"><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">服务器错误，请稍后再试！<hr><img src="img/1.jpg" width="200px"><hr><input type="text"></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>
</html>
首页轮播大图
- 大小屏幕自动适应,扩大缩小浏览器
- 滚动数字区点击左右切换图片
- 左右区域点击切换
- 默认5秒钟自动切换下一张
- 最后一张,回到第一张
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拉勾网</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<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="img/1.jpg"></div><div class="item"><img src="img/2.jpg"></div><div class="item"><img src="img/3.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>
</html>
data 属性解释：
- data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
- data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to=“2” 将把滑动块移动到一个特定的索引，索引从 0 开始计数。
- data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放
3.2 响应式导航条
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body><!-- 默认的导航条样式 --><div class="navbar navbar-default"><!-- 响应式的容器 --><div class="container"><!-- 导航条的头部 --><div class="navbar-header"><a href="#" class="navbar-brand">老孙科技股份有限公司</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>
</html>
03_02_前端 Bootstrap详解相关推荐
- Bootstrap详解
Bootstrap详解 需要使用Bootstrap的样式的时候,可以去该网址https://v4.bootcss.com/ 课程目标: 1.bootstrap简介 2.bootstrap使用 3.案例 ...
- HTML5 多图片上传（前端+后台详解）
HTML5 多图片上传(前端+后台详解) 1.参考jquery插件库 2.修改代码 3.添加的后台代码 4.删除的后台代码 1.参考jquery插件库 手机端实现多图片上传 2.修改代码 我发现他这里 ...
- web前端项目详解：OPPO首页进度条特效（定时轮播）
web前端项目详解:OPP首页进度条特效(定时轮播) 知识点:布局结构分析,定位运用,页面兼容性问题,Jquery的基础运用(修改盒子样式,动画方法,简单算法,淡入淡出方法,定时器方法)代码结构 效果 ...
- 钉钉免登陆前端操作详解
在钉钉免登陆中,前端操作是很重要的,因为在前端我们需要调用钉钉的jsapi来获取code,而这个code值是至关重要的.所以我 再次清清楚楚的解析一遍前端的操作.下面的是我写的demo,我讲以这个de ...
- 从0搭建前端脚手架详解（小白也可以搭建）
本篇文章用来为大家提供一个搭建简易前端脚手架的思路. 先来看一眼实现的效果. 从图上来看这个脚手架的功能非常的简单只有一个创建的命令,其他都是帮助和显示版本号的. 也就是上图这句,创建一个新项目,只需 ...
- Ruoyi框架学习--Vue前端配置文件详解
CSDN话题挑战赛第2期 参赛话题:学习笔记 1.package.json配置中的重点介绍: 1.许可证:license:各种License介绍(BSD,MIT,MPL,Apache License, ...
- 前端开发学习路径之阶段七：BootStrap详解
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一 ...
- gulpfile php,Laravel利用gulp如何构建前端资源详解
什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API ...
- Oracle bootstrap$ 详解
一. 官网说明 Oracle官方文档对Bootstrap$的说明: UnderstandingBootstrap Of Oracle Database http://blog.csdn.net/tia ...
最新文章
- 鼠标放在图片连接上面,预览图片
- 【译】MVVM Tutorial with ReactiveCocoa: Part 1/2
- java接口是类型吗_JAVA中，接口到底是不是类
- 如何用python画数据图-用Python绘制地理图
- DIV水平方向居中的几种方法
- Linux 进程学习（四）------ sigaction 函数
- 今晚直播丨如何通过APEX实现数据库自动晨检功能
- 利用公式画图_【高中数学】重要公式大汇总！
- 基于WebMatrix的轻量级Web开发系列课程
- 查询显示注释_第2章 查询基础
- 如何使用“查找”App 定位丢失的设备或物品？
- STM32cube HAL库 I2C实现LM75数字温度传感器温度读取，并串口打印
- 用户认证授权系统方案思考
- Golang go-svc包源码分析
- 开源在线答题系统包含：在线考试，问卷调查，在线练题。架构为jdk7、spring4、spring-mvc4
- 力扣周赛 第280场 Java题解
- javac错误: 找不到符号或程序包XXX不存在
- vue将文件流转成xlsx文件
- 计算机三级上机场,自学通过计算机二级、三级、四级，保研天津大学，证书拿到手软！你被中航大男神圈粉了吗？...
- Batch 批处理脚本