bootstrap 架构简述bootstrap框架

转载

coolfengsy 2023-07-30 13:35:51

文章标签 bootstrap 架构 Bootstrap bootstrap 响应式 文章分类 架构后端开发

一.什么是Bootstrap

基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。bootstrap最为重要的部分就是它的响应式布局,通过这种布局可以兼容pc端,pad以及手机移动端的访问.

二.bootstrap的构成

Bootstrap构成模块从大的方面可分为布局框架、页面排版、基本组件、jQuery插件以及变量编译的LESS几个部分：

（1）页面布局 Bootstrap提供了网格系统、响应式布局，适应各种设备。

（2）页面排版 Bootstrap 的页面排版从全局概念出发，定制了主体文本、段落文本、标题、按钮、表单、表格等格式。

（3）基本组件 Bootstrap 包含了十几个可重用的组件，用于创建下拉菜单、导航、警告框等等。

（4）jQuery插件 Bootstrap 包含了十几个自定义的 jQuery 插件，用来帮助开发者实现与用户交互的功能。可以直接包含所有的插件，也可以逐个包含这些插件。

( 5 ) 动态样式语言——LESS基于LESS，可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

bootstrap的引用:

下载js包,jQuery包,bootstrap包并引入

bootstrap 架构简述bootstrap框架_bootstrap

三.全局css样式

1.响应式图片

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

bootstrap 架构简述bootstrap框架_bootstrap_02

2.全局显示、排版和链接

Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式

通过属性 @link-color 设置全局链接的颜色。

3.容器(为div盒子添加该类)

#Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器

#提供了两个作用此处的类：.container和.container-fluid

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

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

#容器类不能互相嵌套

4.栅格系统

栅格系统会随屏幕的大小增减自动分配,最多12列,通过一系列的行和列的组合来创建布局.

示例代码及效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<style type="text/css">
			div{
				text-align: center;
				border: #000000 1px solid;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-2">我占据了两份</div>
				<div class="col-md-8">我占据了八分</div>
				<div class="col-md-2">我占据了两份</div>
			</div>
		</div>
	</body>
</html>

bootstrap 架构简述bootstrap框架_bootstrap_03