使用Bootstrap搭界面案例以及图标的运用
准备工作:
先在<head>(头部)里<!-- 引入Bootatrap的CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />在body里面的最后面引入JQuery的类库和Bootstarap的类库(是为了加快的页面加载的速度)
[注:在引入Bootstrap的类库之前必须引入JQuery库]
<!-- 引入JQuery的类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入Bootstrap的类库 -->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
一,案例1,实现搜索书籍页面
使用的Bootstrap组件中的媒体对象(Media object)
代码块:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例1:实现搜索书籍页面</title><!-- 引入Bootatrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 支持手机端 --><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style type="text/css">.navbar-collapse {flex-grow: 0;/*1代表弹性扩大占用父容器剩余空间 设置为0表示不占用 在固定容器中*/}.ss {background-color: #DBDBDA;/* 背景颜色 */height: 100px; /* 高度 */margin-top: 20px;/* 上间距 */}.form-group {width: 300px;/* 宽度 */margin-top: 31px;/* 上间距 */margin-left: auto;/* 左边距自适应 自动 */margin-right: auto;/* 右边距自适应 自动 */}.list-group{margin-top: 30px;/* 上间距 */}.media{margin-top: 30px;/* 上间距 */}.media-body p{line-height: 15px;/* 行高 */letter-spacing: 2px;/* 字符间距 */}</style></head><body><!-- 导航条组件 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">你好,欢迎来到小袁废品回收站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">登录</a></li><li class="nav-item"><a class="nav-link" href="#">注册</a></li><li class="nav-item"><a class="nav-link">我的购物车</a></li></ul></div></div></nav><!-- 大致思路: 第一行 搜索区域第二行左3 书籍分类右9上为轮播图下位新书上架-以及热门书籍--><!-- 固定容器 栅格系统--><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><!-- 搜索区域 --><!-- 表单组件 --><form><div class="form-group"><!-- 输入框组组件 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="书籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查询</button></div></div></div></form></div></div><!-- 第二行 --><div class="row"><div class="col-3"><!-- 书籍分类 --><div class="list-group"><button type="button" class="list-group-item list-group-item-action active" aria-current="true">书籍分类</button><button type="button" class="list-group-item list-group-item-action">军事</button><button type="button" class="list-group-item list-group-item-action">言情</button><button type="button" class="list-group-item list-group-item-action">科幻</button><button type="button" class="list-group-item list-group-item-action">动作</button><button type="button" class="list-group-item list-group-item-action">科技</button><button type="button" class="list-group-item list-group-item-action">教育</button><button type="button" class="list-group-item list-group-item-action">社会</button><button type="button" class="list-group-item list-group-item-action">计算机技术</button><button type="button" class="list-group-item list-group-item-action">文艺</button><button type="button" class="list-group-item list-group-item-action">励志</button><button type="button" class="list-group-item list-group-item-action">青春</button></div></div><div class="col-9" ><!-- 右9 --><div class="media"><img src="./img/1.png" class="mr-3" alt="..."><div class="media-body"><h5 class="mt-0">冷间谍</h5><p>价格:10元</p><p>作者:zz</p><p>出版社:天津出版社</p><p>简介:内容详细</p><p><button type="button" class="btn btn-danger">加入购物车</button><button type="button" class="btn btn-danger">立即购买</button></p></div></div><div class="media"><img src="./img/2.png" class="mr-3" alt="..."><div class="media-body"><h5 class="mt-0">冷间谍</h5><p>价格:10元</p><p>作者:zz</p><p>出版社:天津出版社</p><p>简介:内容详细</p><p><button type="button" class="btn btn-danger">加入购物车</button><button type="button" class="btn btn-danger">立即购买</button></p></div></div><div class="media"><img src="./img/3.png" class="mr-3" alt="..."><div class="media-body"><h5 class="mt-0">冷间谍</h5><p>价格:10元</p><p>作者:zz</p><p>出版社:天津出版社</p><p>简介:内容详细</p><p><button type="button" class="btn btn-danger">加入购物车</button><button type="button" class="btn btn-danger">立即购买</button></p></div></div></div></div><!-- 一如JQuery的类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 引入Bootstrap的类库 --><script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script></body>
</html>
效果图:
二,案例二:实现购物车页面布局
使用的Bootstrap页面布局中的表格(Tables)和Bootstrap组件中的按钮和模态框
页面布局中的表格
带轮廓线的按钮
模态框
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例2:实现购物车页面布局</title><!-- 一如Bootatrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 支持手机端 --><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style type="text/css">.navbar-collapse {flex-grow: 0;/*1代表弹性扩大占用父容器剩余空间 设置为0表示不占用 在固定容器中*/}.ss {background-color: #DBDBDA;/* 背景颜色 */height: 100px; /* 高度 */margin-top: 20px;/* 上间距 */}.form-group {width: 300px;/* 宽度 */margin-top: 31px;/* 上间距 */margin-left: auto;/* 左边距自适应 自动 */margin-right: auto;/* 右边距自适应 自动 */}.list-group{margin-top: 30px;/* 上间距 */}.table{margin-top: 30px;/* 上间距 */}.table thead{color: white;/* 字体颜色 */}.table tr{text-align: center;/* 水平居中 */}.table tr input{text-align: center;/* 水平居中 */}.yy{text-align: center;/* 水平居中 */}.yy button{height: 30px;line-height: 10px;}</style></head><body><!-- 模态框的html代码 --><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">核对订单</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body">后期放订单详细</div><div class="modal-footer"><button type="button" class="btn btn-primary">确定</button><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button></div></div></div></div><!-- 导航条组件 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">你好,欢迎来到小袁废品回收站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">登录</a></li><li class="nav-item"><a class="nav-link" href="#">注册</a></li><li class="nav-item"><a class="nav-link">我的购物车</a></li></ul></div></div></nav><!-- 大致思路: 第一行 搜索区域第二行左3 书籍分类右9上为轮播图下位新书上架-以及热门书籍--><!-- 固定容器 栅格系统--><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><!-- 搜索区域 --><!-- 表单组件 --><form><div class="form-group"><!-- 输入框组组件 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="书籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查询</button></div></div></div></form></div></div><!-- 第二行 --><div class="row" ><div class="col-3"><!-- 书籍分类 --><div class="list-group"><button type="button" class="list-group-item list-group-item-action active" aria-current="true">书籍分类</button><button type="button" class="list-group-item list-group-item-action">军事</button><button type="button" class="list-group-item list-group-item-action">言情</button><button type="button" class="list-group-item list-group-item-action">科幻</button><button type="button" class="list-group-item list-group-item-action">动作</button><button type="button" class="list-group-item list-group-item-action">科技</button><button type="button" class="list-group-item list-group-item-action">教育</button><button type="button" class="list-group-item list-group-item-action">社会</button><button type="button" class="list-group-item list-group-item-action">计算机技术</button><button type="button" class="list-group-item list-group-item-action">文艺</button><button type="button" class="list-group-item list-group-item-action">励志</button><button type="button" class="list-group-item list-group-item-action">青春</button></div></div><div class="col-9" ><table class="table"><thead><tr class="bg-primary"><th scope="col" >书名</th><th scope="col">单价</th><th scope="col">数量</th><th scope="col">小计</th><th scope="col">操作</th></tr></thead><tbody><tr><th scope="row">冷间谍</th><td>18</td><td><input type="text" value="2"/></td><td>36</td><td><input type="button" value="删除" /></td></tr><tr><th scope="row">冷间谍</th><td>18</td><td><input type="text" value="2"/></td><td>36</td><td><input type="button" value="删除" /></td></tr></tbody></table><p class="yy"><button type="button" class="btn btn-outline-primary">清空购物车</button><button type="button" class="btn btn-outline-primary">继续购物</button><button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModal">点我结算</button></p></div></div></div><!-- 一如JQuery的类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 引入Bootstrap的类库 --><script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script></body>
</html>
效果图1:
注:那个清空购物车本来是和其它文本框一样的是鼠标移上后的效果因为用来按钮的轮廓线效果
效果图2
注:这是点击了我要结算之后的效果是用的是Boootstrp中的模态框效果
三,图标的基本使用
图标的下载:点我下载
3.1,进入Bootstrap管网之后点击图标库
3.2,然后点击安装
3.3,然后点就下载最新版的zip.压缩包
注:这里我们下载Source code(zip)也就是第二个第一个是所有图标 然后第二个包含了第一个里面的内容第三个可以不用管
下载了之后:
3.4,解压完之后打开
3.5,然后把font整体copy到我们要用的项目里
使用方法
<button class="btn btn-primary" type="button" id="button-addon2"><i class="bi bi-search"></i></button>
注:在使用之前必须引入图标的Css
<!-- 引入图标库的css -->
<link rel="stylesheet" type="text/css" href="font/bootstrap-icons.css"/>
效果图:
四,图标具体使用方法:
4.1进入Bootstrap官网
4.2打开官网之后点击图标库(右上角能进行查找)
4.3然后点击我想用的图标点进去
最后直接copy放到要用的文本框里就行了(可以只用图标字体 也可以直接复制html代码)
例如:
<button class="btn btn-primary" type="button" id="button-addon2"><i class="bi bi-alarm"></i></button>
使用Bootstrap搭界面案例以及图标的运用相关推荐
- Bootstrap框架中的字形图标的理解
最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...
- html+字体图标找不到字体,bootstrap中不显示字体图标问题怎么解决?
bootstrap中不显示字体图标的原因是什么?怎么解决?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 你在使用bootstrap字体图标的时候,是否遇 ...
- 《Bootstrap+JSP开发案例》学习
<Bootstrap+JSP开发案例>学习 本次学习到的主要内容 前台登录页面 JS 表单验证 PrepareStatement 接口 密码MD5加"盐"加密 前言 最 ...
- 如何在Bootstrap中使用iconMoon字体图标
关于在bootstrap中如何使用iconMoon图标: 1.首先找到iconMoon官网,然后点击import icons导入你的svg图标 2.导入成功进入以下界面,点击Preferences F ...
- BootStrap使用笔记+案例
前端开发 第三节BootStrap BootStrap BootStrap是别人写好的CSS样式,如何使用BootStrap: 下载BootStrap https://v3.bootcss.com/ ...
- bootstrap组件的案例代码
运行结果如图所示: 代码如下所示: <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
- 使用bootstrap.css框架无法显示图标问题
引入了bootstrap.css之后使用图标类,但是不能显示出来:版本为v3.3.0, 主要是因为没有引入fonts字体图标包:下载的框架文件中会有一个fonts文件夹:里面带有字体以及图标对应的文件 ...
- springboot+bootstrap在显示页面时图标失效(已解决)
在写项目的时候运用了bootstrap技术,但是在浏览器上访问的时候发现图标失效了? 最终解决方案在pom文件里加入 <build><resources><resourc ...
- Bootstrap代码及案例
一.案例1:实现搜索书籍页面 <div class="col-9"><!-- 右9 --><div class="media"&g ...
最新文章
- java高级语言特性_Java语言高级特性——注解
- Oracle索引简单介绍与示例
- World Wind Java开发之四——搭建本地WMS服务器(转)
- Java关于延迟加载的一些应用最佳实践
- MongoDB 进阶模式设计
- C++中STL容器利用迭代器删除元素小结
- Android8.1展讯平台之audio_policy_configuration.xml(四十二)
- 计算机免费取名,电脑免费取名
- css 之水平居中对齐
- java-序列化以及反序列化
- bzoj3332 旧试题 [最大生成树]
- 开发与研发:区别很大(上)
- 案例2:丙类仓库建筑防火案例分析
- mapreduce 论文 - 阅读笔记
- 卫星遥感在农业干旱方面最新研究
- Java:如何选择一个好的Java外包合作伙伴?
- carla学习笔记(七)
- 视频变速怎么做?手把手教会你
- windows PR提权
- Ubuntu运行roscore时候报错 Unable to contact my own server at xxx的解决方法