Bootstrap的安装和使用

迷茫小白鼠

已于 2022-01-22 14:03:32 修改

阅读量3.2k

点赞数 3

文章标签： bootstrap javascript css

于 2022-01-22 13:55:19 首次发布

本文链接：https://blog.csdn.net/weixin_46128831/article/details/122635503

版权

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.com，并借助GitHub平台实现社区化开发和共建）

3.下载与使用

3.1下载

官网：https://getbootstrap.com/

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

解压文件

3.2下载完成后

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

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

3.3下载jquery.js

https://jquery.com/

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.运行结果

迷茫小白鼠

关注

3
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap的安装和使用

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

扫一扫