1.BootStrap简介  

          Bootstrap是由美国Twitter公司开发的一种前端框架,用来快速开发响应式布局、移动设备优先的Web项目,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简单,粗暴。

2.   BootStrap特点                                                                                  

(1) 移动设备优先

(2)响应式Web设计

(3) 浏览器支持

(4)容易上手

(5)网格布局

(6)丰富的组件及插件

(7)使用LESS构建动态样式

(8)支持HTML5和CSS3

(9)开源(项目托管于GitHub:http://github,并借助GitHub平台实现社区化开发和共建)       

3.下载与使用                                                                                           

3.1下载 

官网:https://getbootstrap/

中文网:https://www.bootcss/

 解压文件

3.2下载完成后

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

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

3.3下载jquery.js

https://jquery/

3.4使用需要把下载好的bootstrap文件夹拷贝到新建的项目中去(jquery文件也一样)

4.实例

4.1代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>BootStrap实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
		<script src="js/jquery-3.6.0.slim.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
	<div class="container">
		<div class="jumbotron">
			<h1>我的第一个Bootstarp页面</h1>
			<p>重置窗口大小,查看响应式效果!</p>
		</div>
		<div class="row">
			<div class="col-sm-4">
				<h3>第一列</h3>
				<p>Bootstrap是目前最受欢迎的前端框架之一。</p>
			</div>
			<div class="col-sm-4">
				<h3>第二列</h3>
				<p>Bootstrap用于快速开发响应式布局、移动设备优先的WEB项目。</p>
			</div>
			<div class="col-sm-4">
				<h3>第三列</h3>
				<p>Bootstrap是基于HTML、CSS、JAVASCRIPT。</p>
			</div>
		</div>
	</div>	
	</body>
</html>

4.2介绍

注意地址的更换 

5.运行结果

更多推荐

Bootstrap的安装和使用