BootStrap详细应用-小bai前端框架进阶秘籍

最新推荐文章于 2023-10-31 01:19:39 发布

悲欢唯谁懂

最新推荐文章于 2023-10-31 01:19:39 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/wnw1234/article/details/123766501

版权

WEB 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

BootStrap是什么?

BootStrap是HTML,CSS,JS框架.主要用于开发响应式布局,移动设备优先的WEB项目.

为什么要使用BootStrap?

1.简洁,直观,强悍的前端开发框架,是HTML,CSS,JavaScript工具集

2.基于H5,C3具有友好的学习曲线,卓越的兼容性,响应式设计,12列网格,样式向导文档

3.自定义JQuery插件,完整的类库.BootStrap3基于Less,BootStrap4基于Sass的CSS预处理技术

4.BootStrap响应式布局设计,让一个网站可以兼容不同分辨率的设备.

5.具有丰富的组件

下载和使用

1.BootStrap下载 https://v3.bootcss.com/

2.下载完成后

拷贝dist/css中的bootstrap.min.css到项目css中

拷贝dist/js中的bootstrap.min.js到项目的js中

3.下载jquery.js jQuery

4.BootStrap的页面模板

<!DOCTYPE html>
<html lang="en">
	<head>
		<!--设置当前HTML文件的字符编码-->
		
		<!--compatible兼容的，设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）-->
		
		<!--声明当前网页在移动端浏览器展示的相关设置-->
		<!-- 
			viewport表示用户是否可以缩放页面
			width指定视区的逻辑宽度
			device-width指定视区宽度应为设备的屏幕宽度
			initial-scale指令用于设置Web页面的初始化缩放比例
			initial-scale-1则将显示未经缩放的Web文档
		 -->
		
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap基本的HTML模板</title>
		<!--引入Bootstrap核心样式表(CSS)文件-->
		<link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
		<!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签-->
		<!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询-->
		<!--[if It IE 9]>
		<script src="html5shiv/html5shiv.min.js"></script>
		<script src="Respond/respond.min.js"></script>
		<![endif]-->
		<!--自己写的CSS样式文件放head最下面-->
	</head>
	<body>
		<div><h1>Hello,world!</h1></div>
		<!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边-->
		<script src="js/jquery.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<!--自己写的js文件放在body最下面-->
	</body>
</html>

布局容器

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

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"><!-- 编码 -->
		<title>OA办公自动化系统</title><!-- 标题 -->
		<!-- <link href="images/favicon1.ico" rel="icon" type="image/x-icon" /><!-- 登录界面图标 --> -->
		<link href="../../static/bootStrap/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
		
	</head>
	<body>
		<div class="container" style="background-color: thistle;height: 500px;">
			container:类用于固定宽度并支持响应式布局的容器
		</div>
	</body>
</html>

效果

container-fluid类用于100%宽度,占据全部视口(viewport)的容器

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"><!-- 编码 -->
		<title>OA办公自动化系统</title><!-- 标题 -->
		<!-- <link href="images/favicon1.ico" rel="icon" type="image/x-icon" /><!-- 登录界面图标 --> -->
		<link href="../../static/bootStrap/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
		
	</head>
	<body>
		<div class="container-fluid" style="background-color: thistle;height: 500px;">
			.container-fluid类用于100%宽度,占据全部视口(viewport)的容器
		</div>
	</body>
</html>

效果

栅格网格系统是什么?

BootStrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或32份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出来强大的响应式网格系统。BootStrapu框架中的网格系统就是将容器平分成12份。

注意:网格系统必须使用到CSS

container、row、xs（xsmall phones 超小屏（自动）），sm（small tablets 小屏（750px）），md（middle desktops 中屏（970px）），lg（laege desktops 和大屏（1170px））

数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）。

在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"><!-- 编码 -->
		<title>OA办公自动化系统</title><!-- 标题 -->
		<!-- <link href="images/favicon1.ico" rel="icon" type="image/x-icon" /><!-- 登录界面图标 -->
		<link href="../../static/bootStrap/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
			
	</head>
	<body>
		<!-- 常规布局 -->
		<div style="background-color: deepskyblue;">常规布局 4</div>
		<div style="background-color: bisque;">常规布局 8</div>
		<hr />
		<!-- 布局容器 -->
		<div class="container">
			<div class="row"><!-- 行元素 -->
				<div class="col-md-4" style="background-color: deepskyblue;">4列</div><!-- 列元素  col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值 -->
				<div class="col-md-8" style="background-color: bisque;">8列</div>
			</div>
		</div>
	</body>
</html>

效果

悲欢唯谁懂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap详细应用-小bai前端框架进阶秘籍

BootStrap是什么?BootStrap是HTML,CSS,JS框架.主要用于开发响应式布局,移动设备优先的WEB项目.为什么要使用BootStrap?1.简洁,直观,强悍的前端开发框架,是HTML,CSS,JavaScript工具集2.基于H5,C3具有友好的学习曲线,卓越的兼容性,响应式设计,12列网格,样式向导文档3.自定义JQuery插件,完整的类库.BootStrap3基于Less,BootStrap4基于Sass的CSS预处理技术4.BootStrap响应式布局设计,
复制链接

扫一扫