前端框架Bootstrap总结

最新推荐文章于 2021-10-20 21:42:50 发布

zkCodes

最新推荐文章于 2021-10-20 21:42:50 发布

阅读量679

点赞数

分类专栏： html&css

本文链接：https://blog.csdn.net/zk_813/article/details/100086685

版权

html&css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.什么是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包并引入

三.全局css样式

1.响应式图片

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

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>

参数表:

5.响应式工具类&响应式列重置

#响应式工具类

#响应式列重置

6.一些常用的样式

标题样式:

#1.Bootstrap 分别对h1 ~ h6 进行了CSS 样式的重构，字体颜色、字体样式、行高均被固定了，从而保证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。

#2.Bootstrap还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能

#3.向任何标题h1 ~ h6添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本

文本样式:

#Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即20px)；

#<p>段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。

#为了给段落添加强调文本，则可以添加 class=“lead”，这将得到更大更粗、行高更高的文本

实在写不下去了,我有ppt方法样式好多,有意留言

zkCodes

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端框架Bootstrap总结

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

扫一扫

专栏目录