Bootstrap前端框架

来源：互联网发布：sum在c语言中什么意思编辑：程序博客网时间：2024/06/05 04:06

一.BootStrap简介

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的CSS/HTML框架，它简洁灵活，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，由动态CSS语言Less写成
Bootstrap预定义一套CSS样式和与样式相对应的JQuery代码，开发者只需要提供固定的HTML结构，添加固定的class样式，就可以完成指定效果的实现
Bootstrap非常好的实现了响应式布局（解决移动互联网浏览提供的一种方案），使一个网站能兼容多个终端（手机，iPad等），使用Bootstrap制作的网站不用制定多个版本，也能为不同终端的用户提供很好的用户体验

二.BootStrap入门

Bootstrap的官方网站上有非常详细的教程，给出了很多实例和模板，想使用Bootstrap只需要看Bootstrap官网上的教程即可
Bootstrap官网链接

打开官网

这里写图片描述

点击页面中央的中文文档，打开教程页

这里写图片描述

教程页的导航栏中将Bootstrap的教程分为了几个部分，前4个部分的内容即可让不懂Bootstrap初学者能够简单使用Bootstrap
第1部分起步讲的是Bootstrap的下载，安装（导入到项目中），及环境的配置。
第2，3，4部分则是用具体的Demo对Bootstrap的各种样式和效果的列举展示，每个Demo都有相应的代码，使用者只需要将需要的代码粘贴到自己的项目中然后做相应的修改即可

三.BootStrap导入项目及环境配置

3.1 Bootstrap下载

在起步部分，可以看到BootStrap的下载选项

这里写图片描述

如果只是使用该框架的话，选择第一项编译完成，不包含源码及文件的Bootstrap即可

下载完成后得到一个名称中带有dist的文件夹

这里写图片描述

版本不同名称可能不同，我下载的是3.3.7版本，此文件的目录结构下如图，css文件夹下放置的是Bootstrap的样式文件，js文件夹下放置的是Bootstrap的核心文件，fonts文件夹下则是和字体相关的文件

bootstrap/├── css/│   ├── bootstrap.css│   ├── bootstrap.css.map│   ├── bootstrap.min.css│   ├── bootstrap.min.css.map│   ├── bootstrap-theme.css│   ├── bootstrap-theme.css.map│   ├── bootstrap-theme.min.css│   └── bootstrap-theme.min.css.map├── js/│   ├── bootstrap.js│   └── bootstrap.min.js└── fonts/    ├── glyphicons-halflings-regular.eot    ├── glyphicons-halflings-regular.svg    ├── glyphicons-halflings-regular.ttf    ├── glyphicons-halflings-regular.woff    └── glyphicons-halflings-regular.woff2

3.2 搭建Bootstrap环境

将以上3个文件夹和其中的文件放置到wabapp目录下。因为Bootstrap中运用了很多JQuery插件的内容，所以Bootstrap正常使用必须还要导入JQuery的核心文件（版本不能老，否则Bootstrap某些功能不能正常使用）

3.3 在页面文件中进行Bootstrap的基本设置

在Bootstrap官网教程的起步部分，给出了Bootstrap的模板：

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->    <title>Bootstrap 101 Template</title>    <!-- Bootstrap -->    <link href="css/bootstrap.min.css" rel="stylesheet">    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>    <h1>你好，世界！</h1>    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>    <!-- Include all compiled plugins (below), or include individual files as needed -->    <script src="js/bootstrap.min.js"></script>  </body></html>

模板中需要注意的几点：
1）媒体设置，三个< meta >标签，是Bootstrap进行响应式开发必须要有的设置

<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1">

2）导入Bootstrap的支持文件，包括Bootstrap的样式文件，JQuery核心文件和Bootstrap的核心文件（此模板中的文件路径使用的是网络路径，可以根据使用情况改为本地路径）

<link href="css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script src="js/bootstrap.min.js"></script>

3.4 响应式布局相关的设置

Bootstrap在3个< meta > 标签中设置和响应式布局相关的内容

<meta name="viewport" content="width=device-width, initial-scale=1">

其中name=”viewport”的标签中的设置比较重要
viewport指的是设备的屏幕上用来显示网页的区域
content的设置参数：

属性名属性描述举例 width 设置layout viewport的宽度，可以是一个正整数，也可以是字符串”width-device”(即根据设备宽度自动缩放) width=800px或width=device-width(常用) initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 initial-scale=1(1表示按1:1缩放) minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数 minimum-scale=0.5 maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数 maximum-scale=1.5 height 设置layout viewport的高度，这个属性并不重要，很少使用 user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no代表不允许,yes代表允许 user-scalable=yes(如果选no上面的设置全废了)

四.Bootstrap导学

由于Bootstrap的官网给了非常详细的教程，下面根据教程做几个示例示范一下如何使用该教程Bootstrap，如果需要使用Bootstrap，直接看官网教程即可

4.1 分页条

黑马商城商品分类分页展示部分，未使用Bootstrap时的效果：

这里写图片描述

JSP代码：

<div id="paginationId" style="font-size:14px;margin:0;display:block;">                第${pageBean.pageNumber}/${pageBean.totalPage}页&nbsp;                总项数:${pageBean.totalRecord}&nbsp;                每页显示:${pageBean.pageSize}&nbsp;                <c:if test="${pageBean.pageNumber gt 1}">                    <a href="${pageContext.request.contextPath}/productServlet?method=productList&cid=${pageBean.data[0].cid}&pageNumber=1">[首页]                    </a>&nbsp;                    <a href="${pageContext.request.contextPath}/productServlet?method=productList&cid=${pageBean.data[0].cid}&pageNumber=${pageBean.pageNumber-1}">                        [上一页]</a>                </c:if>&nbsp;                <c:forEach var="i" begin="1" end="${pageBean.totalPage}">                    <c:if test="${pageBean.pageNumber eq i}">                        第${i}页                    </c:if>                    <c:if test="${pageBean.pageNumber != i}">                        <a href="${pageContext.request.contextPath}/productServlet?method=productList&cid=${pageBean.data[0].cid}&pageNumber=${i}">第${i}页</a>                    </c:if>                </c:forEach>&nbsp;                <c:if test="${pageBean.pageNumber lt pageBean.totalPage}">                    <a href="${pageContext.request.contextPath}/productServlet?method=productList&cid=${pageBean.data[0].cid}&pageNumber=${pageBean.pageNumber+1}">[下一页]                    </a>&nbsp;                    <a href="${pageContext.request.contextPath}/productServlet?method=productList&cid=${pageBean.data[0].cid}&pageNumber=${pageBean.totalPage}">                        [尾页]</a>                </c:if>            </div>

查看Bootstrap官方教程，1.在导航栏中选择组件部分

这里写图片描述

2.根据右侧内容提纲找到分页部分，3.复制默认分页代码

这里写图片描述

在默认效果上进行更改及添加，完善后的代码：

<nav aria-label="Page navigation">                    <ul class="pagination">                        <c:if test="${!(pageBean.pageNumber gt 1)}">                            <li class="disabled">                                <span aria-hidden="true">&laquo;</span>                            </li>                        </c:if>                        <c:if test="${pageBean.pageNumber gt 1}">                            <li>                                <a href="${pageContext.request.contextPath}/productServlet?method=productList&cid=${pageBean.data[0].cid}&pageNumber=${pageBean.pageNumber-1}" aria-label="Previous">                                    <span aria-hidden="true">&laquo;</span>                                </a>                            </li>                        </c:if>                        <c:forEach var="i" begin="1" end="${pageBean.totalPage}">                            <c:if test="${pageBean.pageNumber eq i}">                                <%--<li class="active"><a href="#">${i}</a></li>--%>                                <li class="active"><a href="#">${i}</a></li>                            </c:if>                            <c:if test="${pageBean.pageNumber != i}">                                <li><a href="${pageContext.request.contextPath}/productServlet?method=productList&cid=${pageBean.data[0].cid}&pageNumber=${i}">${i}</a></li>                            </c:if>                        </c:forEach>                        <c:if test="${pageBean.pageNumber lt pageBean.totalPage}">                            <li>                                <a href="${pageContext.request.contextPath}/productServlet?method=productList&cid=${pageBean.data[0].cid}&pageNumber=${pageBean.pageNumber+1}" aria-label="Next">                                    <span aria-hidden="true">&raquo;</span>                                </a>                            </li>                        </c:if>                        <c:if test="${ !(pageBean.pageNumber lt pageBean.totalPage)}">                            <li class="disabled">                                <span aria-hidden="true">&raquo;</span>                            </li>                        </c:if>                    </ul>                </nav>

加入Bootstrap样式后的分页栏效果：

这里写图片描述

阅读全文

1 0