Bootstrap基本介绍

Bootstrap一、Bootstrap是什么Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架是一个用于快速开发Web应用程序和网站的前端框架Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架二、为什么要用Bootstrap

大大怪僵軍

15176人浏览 · 2022-03-31 20:29:15

大大怪僵軍 · 2022-03-31 20:29:15 发布

Bootstrap

一、Bootstrap是什么

Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架

是一个用于快速开发Web应用程序和网站的前端框架

Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷

概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

二、为什么要用Bootstrap

因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容易上手。

三、如何使用Bootstrap

1.下载Bootstrap库 https://v4.bootcss.com/(Bootstrap管网)

2.页面中引入库

jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】

bootstrap.css：Bootstrap核心样式【添加到head标签中】

四，案例

查询按钮原生态实现对比Bootstrap方式实现


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>案例1：查询按钮原生态实现对比Bootstrap方式实现</title>
		<style type="text/css">
			.aa{
				background-color: #007BFF;/* 背景颜色 */
				color: white;/* 字体颜色 */
				border:0px; /* 无边框*/
				width: 60PX;/* 宽度 */
				height: 40PX;/* 高度 */
				font-size: 1.125rem;/* 字体大小 */
				border-radius: 4px;/* 设置外边框圆角 */
			}
		</style>
		<!-- 引入Bootstrap的css(层叠样式) -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<!-- 支持手机端 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
			<button class="aa">查询</button>
			<hr color="red">
			<button class="btn btn-danger">查询</button>
			<!-- 引入JQuery库 -->
			<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
			<!-- 引入Bootstrap的类库 -->
			<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>