Bootstrap01

最新推荐文章于 2024-09-05 16:15:00 发布

--mq--

最新推荐文章于 2024-09-05 16:15:00 发布

阅读量1.2k

点赞数 1

分类专栏： Bootstrap 文章标签：前端框架

本文链接：https://blog.csdn.net/m12120426/article/details/124505336

版权

Bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了Bootstrap的基本概念，包括其起源、用途和优势，并详细讲解了如何下载和安装Bootstrap库，以及如何在HTML中引入。通过实例展示了Bootstrap按钮与原生按钮的区别，强调了Bootstrap的响应式设计和易用性。适合初学者了解和学习Bootstrap。

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

一、三个什么？

Bootstrap是什么？

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

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

③Bootstrap是用于HTML、css、js的，简洁灵活，使得web开发更加快捷

Bootstrap是一个建立一个页面，就可以在三个终端上完美展示的响应式前端框架

为什么学Bootstrap？

响应式设计

移动设备优先

浏览器支持

容易上手

为开发人员创建接口提供了一个简介统一的解决方案

是开源的

什么时候用Bootstrap？

企业网站、博客、网站后台之类的网站

二、环境安装

下载Bootstrap库：

网址：http://www.bootcss.com/

①Download Bootstrap：点击该按钮，可以下载Bootstrap css、JavaScript和字体预编译的压缩版本，不包含文档和最初的源代码文件

②Download source：点击按钮，就可以直接从from上得到最新的Bootstrap LESS 和JavaScript源代码

页面中引入库

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

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

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

③bootstrap.min.js：Bootstrap核心库

②③添加到</body>之前

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

三、测试环境

比较原生态的button和Bootstrap的button区别，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>案例1：查询按钮原生态实现对比Bootstrap方式实现</title>
		<!-- 支持手机端（移动端） -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.aa{
				color:white;/* 字体颜色 */
				background-color: #007BFF;/* 背景颜色 */
				border: 0px;/* 去边框 */
				width:50px;/* 宽度*/
				height: 30px;/* 高度 */
				border-radius: 4px;/* 设置边框圆角 */
			}
		</style>
		<!-- 引入外部css(层叠样式表) -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		
	</head>
	<body>
		<div class="container">
			<button class="aa">查询</button>
			<hr color="lightpink"/>
			<!-- Bootstrap的按钮 -->
			<button class="btn btn-outline-warning">搜索</button>
		</div>
		
		<!-- 引入jQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
		<!-- 引入Bootstrap的类库 -->
		<script src="js/bootstrap.js" type="text/jscript" charset="UTF-8"></script>
		
	</body>
</html>

--mq--

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap01

一、三个什么？Bootstrap是什么？①诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架②是一个用于快速开发web应用程序和网站的前端框架③Bootstrap是用于HTML、css、js的，简洁灵活，使得web开发更加快捷Bootstrap是一个建立一个页面，就可以在三个终端上完美展示的响应式前端框架为什么学Bootstrap？响应式设计移动设备优先浏览器支持容易上手为开发人员创建接口提供了一个简介统一的解决方案是开源的什么时候
复制链接

扫一扫

专栏目录