CSS框架之BootStrap

最新推荐文章于 2023-04-02 23:24:35 发布

VIP文章沈念

最新推荐文章于 2023-04-02 23:24:35 发布

阅读量415

点赞数

分类专栏： Web 文章标签： bootstrap

本文链接：https://blog.csdn.net/Seulementzh1010/article/details/79900379

版权

一、CSS框架：

1、定义：CSS框架是一系列CSS文件的集合体，包含了基本的元素重置、页面排版、网格布局、表单样式、通用规则等代码块，用于简化web前端开发的工作，提高工作效率。

2、CSS框架的优点：提高CSS代码重用效率，基础的代码不需要重复编写；

提供统一而规范的CSS编码规则，有利于团队协作；

浏览器对其兼容性较好。

二、BootStrap：

1、定义：BootStrap是当前较为流行的CSS框架之一，是Twitter退出的一个用于前端开发的开源工具包。

2、优点：企业开发多使用某种CSS框架，其中以BootStrap为目前使用居多；

有利于学习和理解其他框架。

eg：第一个BootStrap界面(首先引入bootstrap.min.css）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>bootstrap_01</title>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>

 <h3>你好,欢迎学习BootStrap!</h3>

</body>
</html>

3、BootStrap基本样式—栅格

（1）栅格基本使用方式：

a. 使用.container(1170px)或container—fluid包裹；

b.列应当包含在行“row”中；

c.列的基本格式：（col-屏幕大小-数字）。

eg:栅格使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>bootstrap_01</title>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-3" style="background-color: red">col-3</div>
		<div class="col-md-9" style="background-color: green">col-9</div>
	</div>
</div>
</body>
</html>

（2）栅格基本使用方式二：

一行多余12列时自动换行；列偏移（.col-md-offset-n:向右偏移n列）；嵌套列（在一个col下再使用row产生一个或多个行）

eg：

<!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">
		<title>Hello Bootstrap</title>
		<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
		<!-- 添加IE8支持 -->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
		<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	</head>
	<body>
        <div class="container">
          <div class="row">
		<div class="col-md-6 col-md-offset-3" style="background-color:yellow">.col-md-6</div>
		
	  </div>
	  <div class="row">
		<div class="col-md-6 col-md-offset-3">
			<div class="row">
				<div class="col-md-4" style="background-color: red">4</div>
				<div class="col-md-8" style="background-color: blue">8</div>
			</div>
		</div>
	</div>
</div>
	</body>
</html>

4、排版：

（1）基于html标签样式：h1-h6、p、mark、del、strong；

（2）文本对齐：Text-left text-right text-center text-nowrap；

（3）列表：list-unstyled(去掉标记)、list-inline(将li显示在一行)。

5、表格样式：

（1）基本样式：table-striped:条纹表格；table-bordered:带边框表格；

table-hover:鼠标悬停；table-condensed:紧缩表格；

（2）状态类：给单元格设置颜色：.active,.success,.info,.warning,.danger

（3）响应式表格：table-responsive

6、表单样式：

（1）基本样式：form-control:表单元素的宽度属性为100%；input-group:表单分组；

checkbox-inline:在一行显示checkbox;Radio-inline:在一行显示radio；

disabled：禁用；readonly:只读；

.has-warning、.has-error或.has-success：表单校验；

添加图标：has-feedback;控件尺寸：input-lg,input-sm

最低0.47元/天解锁文章

沈念

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS框架之BootStrap

一、CSS框架： 1、定义：CSS框架是一系列CSS文件的集合体，包含了基本的元素重置、页面排版、网格布局、表单样式、通用规则等代码块，用于简化web前端开发的工作，提高工作效率。 2、CSS框架的优点：提高CSS代码重用效率，基础的代码不需要重复编写；提供统一而规范的CSS编码规则，有利于团队协作； ...
复制链接

扫一扫