BootStrap前端框架入门加案例

最新推荐文章于 2024-06-10 21:17:33 发布

Codecheng2021

最新推荐文章于 2024-06-10 21:17:33 发布

阅读量516

点赞数 1

本文链接：https://blog.csdn.net/Zz_cheng/article/details/116357964

版权

本文详述了BootStrap的特点，如响应式设计、卓越的兼容性和丰富的组件，并通过实例介绍了其下载与使用、布局容器、栅格系统、表格样式等15个关键点，旨在帮助开发者快速上手并应用于实际项目。

摘要由CSDN通过智能技术生成

BootStrap前端框架

为所有开发者、所有应用场景而设计。
Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
官网
 Bootstrap中文网3 （当前版本 v3.3.7）

前言

是一套现成的css样式集合，是两个推特员工完成的，可以快速地出一个网页

一、BootStrap特点？

简洁、直观、强悍的前端开发框架，html css js工具集，让web开发更加的快速和简单
响应式设计、卓越的兼容性、12列网格、样式向导文档
丰富的组件

二、下载与使用

1.下载：https://v3.bootcss.com/getting-started/#download
2.下载完成，拷贝dist/css中的bootstrap.min.css到项目css中；拷贝dist/js中的bootstrap.min.js到项目js中
3.下载jQuery.js:http://jquery.com/
4.在html中的基本模板为：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
	<!-- 使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 
		viewport表示用户是否可以缩放页面
		width指定视区的逻辑宽度
		device-width指示视区宽度应该为设备的屏幕宽度
		initial-scale指令用于设置web页面的初始缩放比例
		initial-scale=1则将显示未经过缩放的web文档
	 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap的HTML标准模板</title>

    <!-- 载入Bootstrap的css -->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
   <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。 -->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

三、布局容器

代码如下（示例）：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
	<!-- 使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 
		viewport表示用户是否可以缩放页面
		width指定视区的逻辑宽度
		device-width指示视区宽度应该为设备的屏幕宽度
		initial-scale指令用于设置web页面的初始缩放比例
		initial-scale=1则将显示未经过缩放的web文档
	 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>布局容器</title>

    <!-- 载入Bootstrap的css -->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
  </head>
  <body>
			<!-- 布局容器 .container 1.类用于固定宽度并支持响应式布局的容器。 -->
			<div class="container" style="background-color: thistle;height: 500px;">
				字体变化不是从最右边开始
			</div>
			<!-- 2..container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。。 -->
			<div class="container-fluid">
				
			</div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
   <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。 -->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

四、栅格网格系统

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格网格系统</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- 先布局容器 -->
		<div class="container">
			<!-- 行元素 -->
			<div class="row">
				<!-- 列元素1.col-xs-数值超小屏幕 手机 (<768px)   
						   2.小屏幕 平板 (≥768px)col-sm-数值 
						   3.中等屏幕 桌面显示器 (≥992px) col-md-数值 
						   4.大屏幕 大桌面显示器 (≥1200px)col-lg-数值
				-->
				<div class="col-md-4 "  style="background-color: deepskyblue;">4</div>
				<div class="col-md-8" style="background-color: bisque;">8</div>
			</div>
			<hr>
			<!-- 列组合 -->
			<div class="row">
				<div class="col-md-1" style="background-color: mediumslateblue;">1</div>
				<div class="col-md-1" style="background-color: burlywood;">1</div>
				<div class="col-md-1" style="background-color: indianred;">1</div>
				<div class="col-md-1" style="background-color: darkcyan;">1</div>
			</div>
			<hr>
			<!-- 均分为6份 -->
			<div class="row">
				<div class="col-md-6" style="background-color:lightblue ;">1</div>
				<div class="col-md-6" style="background-color:lightgoldenrodyellow;">1</div>
			</div>
			<hr>
			<!-- 均分为3份 -->
			<div class="row">
				<div class="col-md-4" style="background-color:green;">1</div>
				<div class="col-md-4" style="background-color:fuchsia;">1</div>
				<div class="col-md-4" style="background-color:azure;">1</div>
			</div>
			<!-- 列的总数不能超过12   放不下就会自动换行-->
			<hr>
			<div class="row">
				<div class="col-md-4" style="background-color:brown;">1</div>
				<div class="col-md-4" style="background-color:darkcyan;">1</div>
				<div class="col-md-5" style="background-color:hotpink;">1</div>
			</div>
			
			
			
			<hr>
			<!-- 列偏移
					使用 col-md-offset-* 类可以将列向右侧偏移。
			 -->
				<div class="row">
					<div class="col-md-1" style="background-color: mediumslateblue;">1</div>
					<div class="col-md-1 col-md-offset-1" style="background-color: burlywood;">1</div>
					<div class="col-md-1" style="background-color: indianred;">1</div>
					<div class="col-md-1" style="background-color: darkcyan;">1</div>
				</div>
					
					<hr >
					<!-- 列排序 改变列的方向 就是改变左右浮动 通过使用 
					.col-md-push-往后* 和 .col-md-pull-往前* 类就可以很容易的改变列（column）的顺序
					 -->
					<div class="row">
						<div class="col-md-1" style="background-color: mediumslateblue;">1</div>
						<div class="col-md-1 col-md-push-1" style="background-color: burlywood;">1</div>
						<div class="col-md-1" style="background-color: indianred;">1</div>
						<div class="col-md-1 " style="background-color: darkcyan;">1</div>
					</div>
					
					<hr >
					<!-- 列嵌套可以通过添加一个新的 .row 元素和一系列
					 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。
					 被嵌套的行（row）所包含的列（column）的个数不能超过12
					 （其实，没有要求你必须占满12列）。 -->
					<div class="row">
						<div class="col-md-6" style="background-color: navajowhite;">
							<div class="row">
								<div class="col-md-1" style="background-color: salmon;">1</div>
								<div class="col-md-9"style="background-color: beige;">9</div>
								<div class="col-md-1" style="background-color: lawngreen;">1</div>
								<div class="col-md-1" style="background-color: powderblue;">1</div>
							</div>
						</div>
						<!-- 把这两份在均分为12份 -->
						<div class="col-md-6" style=" background-color: teal;">
							6
						</div>
					</div>
					
					<hr >
					<div class="row">
						<!-- 实现自适应效果  在不同设备可以显示不同的列数 -->
						<div class="col-md-3 col-sm-6" style="background-color: salmon;">3</div>
						<div class="col-md-3 col-sm-6"style="background-color: beige;">3</div>
						<div class="col-md-3 col-sm-6" style="background-color: lawngreen;">3</div>
						<div class="col-md-3 col-sm-6" style="background-color: powderblue;">3</div>
					</div>
		</div>
	</body>
</html

最低0.47元/天解锁文章

Codecheng2021

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
BootStrap前端框架入门加案例

BootStrap前端框架为所有开发者、所有应用场景而设计。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。官网Bootstrap中文网3 （当前版本 v3.3.7）前言是一套现成的css样式集合，是两个推特员工完成的，可以快速地出一个网页一、BootStrap特点？简洁、直观、强悍的前端开发框架，html css js工具集，让web开发更加的快速和简单响应式设计、卓越的兼容性、12列网格、样式向导文档丰富的组件二、下载与使
复制链接

扫一扫