BootStrap的介绍与案例使用

最新推荐文章于 2024-06-03 23:50:56 发布

_无往而不胜_

最新推荐文章于 2024-06-03 23:50:56 发布

阅读量1.4w

点赞数 5

分类专栏： jsp html js 文章标签： BootStrap的介绍与案例使用 BootStrap BootStrap使用

本文链接：https://blog.csdn.net/qq_15204179/article/details/82455256

版权

js 同时被 3 个专栏收录

53 篇文章 0 订阅

订阅专栏

jsp

50 篇文章 0 订阅

订阅专栏

html

48 篇文章 3 订阅

订阅专栏

BootStrap的介绍与案例使用

1.案例一:使用Bootstrap重写网站首页

1.1案例介绍

本案例使用Bootstrap重写首页，整个案例中将使用到Bootstrap 中的各个模块。为了方便编程，将采用拆分的方式，各个模块单独编写，最后组合。

1.2案例相关技术

1.2.1BootStrap概述

1.2.1.1 什么是Bootstrap

Bootstrap是基于HTML、CSS、JAVASCRIPT的前端框架（半成品）。其预定义一套CSS样式和与样式对象的jQuery代码，我们只需要提供固定的HTML结构，添加固定的class样式，就可以完成指定效果的实现。

Bootstrap是在jQuery的基础上工作的，可以理解Bootstrap是jQuery的一个插件。

Bootstrap使得Web开发更加快捷，代码优雅，美观大方。

Twitter的设计师Mark Otto和Jacob Thornton合作开发

Bootstrap基础入门使用的都是自带的CSS样式，高级开发中需要使用HTML5、CSS3、动态CSS语言Less进行自定义开发，javaEE课程中学习“基础入门”。

国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

中文官网：http://www.bootcss.com/

1.2.1.2 什么是响应式布局

响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

Bootstrap就是响应式布局最成功的实现，为了兼容不同的浏览器采用jQuery，为了适配不同的终端采用CSS3 Media Query(媒体查询)。

1.2.2.0环境搭建

1.2.2.1 下载

中文官网地址：https://v3.bootcss.com/getting-started/#download

github地址：https://github.com/twbs/bootstrap/archive/v3.3.6.zip

1.2.2.2 目录结构

1.2.2.3 内容结构

发布版，即开始使用到的Bootstrap内容结构

1.2.2.4 简洁模板

<!DOCTYPE html>

<head>

<title>Bootstrap基本模板</title>

</head>

<body>

</body>

</html>

1.2.2.5 完整模板（了解）

<!DOCTYPE html>

<head>

<!--width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"(表示采用设备的宽度)

initial-scale 设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数

height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用

user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效

-->

<title>Bootstrap完整模板</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

1. 重写首页之topbar

1.3.1 案例相关技术

1.3.1.1 布局容器

帮助手册：https://v3.bootcss.com/css/#overview-container

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

1.3.1.2 栅格

帮助手册：https://v3.bootcss.com/css/#grid

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统特点：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-*不存在，也影响大屏幕设备。

栅格参数：“col-*-*”

其中：

large:lg 大尺寸

medium:md 中等尺寸

small:sm 小尺寸

x-small:xs 特小尺寸

案例：

</div>

</div>

</div>

</div>

1.3.1.3 按钮

帮助手册：https://v3.bootcss.com/css/#buttons

网站demo:下面各个按钮代码

<button type="button" class="btn btn-default">（默认样式）Default</button>

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危险）Danger</button>

.btn-lg、.btn-sm或.btn-xs可以设置按钮的不同尺寸

.active类设置按钮激活状态，其表现为被按下去（颜色更深、边框颜色更深、向内投射阴影）。

1.3.1.4 响应式工具

帮助手册：https://v3.bootcss.com/css/#responsive-utilities

例如：

<!--

设置one-div:中等屏幕和超小屏幕显示

设置two-div:小屏幕和超大屏幕隐藏

-->

1.3.2 案例实现

</div>

</div>

</div>

1. 重写首页之导航栏

1.4.1 案例分析

Bootstrap已经提供了导航的完整实例，通常情况下，只需要进行修改即可完成所要功能。

帮助文档：https://v3.bootcss.com/components/#navbar

反色导航条：https://v3.bootcss.com/components/#navbar-inverted

1.4.2 案例实现

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>

</ul>

</li>

</ul>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

</div>

</nav>

</div>

1. 重写首页之轮播图

1.5.1 案例分析

Bootstrap已经提供了轮播图的完整案例，我们只需进行修改即可。

参考文档：https://v3.bootcss.com/javascript/#carousel

1.5.2 案例实现

</ol>

...

</div>

...

</div>

...

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

1.6 重写首页之热卖商品

1.6.1 案例分析

热卖商品是对栅格系统的再次应用，我们将利用已有知识编写出响应式页面。

1.6.2 案例实现

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

1.7 重写首页之footer

1.7.1 案例分析

通过分析，该模块需要使用栅格划分为上下两行。第二行的文字信息准备使用列表，内容的居中将提供两种方案：文字居中，栅格列偏移。

参考文档：

文本对齐：https://v3.bootcss.com/css/#type-alignment

列表：https://v3.bootcss.com/css/#type-lists

栅格列偏移：https://v3.bootcss.com/css/#grid-offsetting

1.7.2 案例实现

</div>

</ul>

</div>

</div>

引入bootstrap：

	<head>
		<meta charset="UTF-8">
		<!--BootStrap设计的页面支持响应式的 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- 引入主题  -->
		<link href="bootstrap-3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
		<!-- 引入bootstrap的css -->
		<link href="bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
		<!-- 引入jquery的js  因为bootstrap使用到jquery的js -->
		<script src="js/jquery-3.3.1.min.js"></script>
		<!-- 引入bootsrap的js -->
		<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
		<title>bootstrap</title>
		<title>导航</title>
	</head>

_无往而不胜_

关注

5
点赞
踩
37

收藏

觉得还不错? 一键收藏
打赏
0
评论
BootStrap的介绍与案例使用

BootStrap的介绍与案例使用 1.案例一:使用Bootstrap重写网站首页 1.1案例介绍本案例使用Bootstrap重写首页，整个案例中将使用到Bootstrap 中的各个模块。为了方便编程，将采用拆分的方式，各个模块单独编写，最后组合。 1.2案例相关技术 1.2.1Boo...
复制链接

扫一扫