Bootstrap4基础学习-介绍篇

梦里梦外; 2023-10-13 22:17 14阅读 0赞

# 1.Bootstrap是什么？ #

*  Bootstrap诞生于2011年，来自`Twitter公司`，是目前最受前端框架
 *  是一个用于`快速开发Web应用程序和网站的前端框架`
 *  Bootstrap是基于`HTML，CSS，JS`的，简单灵活，使得Web开发更加快捷

# 2.为什么学习Bootstrap？ #

*  `响应式设计(Bootstrap的响应式CSS能够自适应台式机，平板电脑和手机)`
 *  `移动设备优先`
 *  `浏览器支持上手`
 *  `容易上手`

# 3.Bootstrap的优势 #

(1)移动设备优先：自Bootstrap 3起，`移动设备优先的样式贯穿于整个库`。

(2)浏览器支持：`主流浏览器都支持Bootstrap`，包括IE、Firefox、Chrome、Safari等。

(3)学习成本低：要学习Bootstrap，只需读者具备HTML和CSS的基础知识。

(4)响应式设计：`Bootstrap的响应式CSS能够自适应于台式机、平板计算机和手机的屏幕大小`。

(5)良好的代码规范：为开发人员创建接口`提供了一个简洁统一的解决方案，减少了测试的工作量`。

(6)组件：Bootstrap包含了功能`强大的内置组件`。

(7)定制: Bootstrap还提供了`基于Web的定制`。

# 4.Bootstrap包含哪些内容 #

Bootstrap包中提供的内容包括`基本结构`、`CSS`、`布局组件`、`JavaScript插件等`ww，具体如下：

(1)基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。

(2)CSS：Bootstrap自带全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的栅格系统。

(3)布局组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等。

(4) JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件，可以直接包含所有的插件，也可以逐个包含这些插件。

(5)定制：开发人员可以定制Bootstrap的组件、LESS 变量和jQuery插件来得到一套自定义的版本。

由此可以看出，Bootstrap中预定义了一套CSS样式和一套对应的jQuery代码，应用时只需提供固定的HTML结构，添加Bootstrap中提供的class名称，就可以完成指定效果的实现。

# 4.如何使用 #

## 1)下载Bootstrap库 ([Bootstrap管网][Bootstrap]) ##

打开官网的时候

## 2)点击下载Bootstrap ##

![在这里插入图片描述][09e1a628d6fc4699b0458f2014072ca1.png]  
下载后解压文件![在这里插入图片描述][30fa8c272b1f4151bc5133dba58783d3.png]  
dist点开里面分为CSS和JS  
![在这里插入图片描述][460409df5c564fa7a8e1ff96aa442227.png]  
![在这里插入图片描述][f42ed748c6e6477e943d668b9e06e690.png]

> 注意：bootstrap.css：Bootstrap核心样式(添加到head标签中)  
> bootstrap.js：Bootstrap核心库

## 3）实现 ##

<!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>
    		
    		<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>
    			
    			<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>
    	</body>
    </html>

> 第一个是自己写的样式\[.aa\]，第二个是用Bootstrap写的  
> ![在这里插入图片描述][9ac12b36a47e43dda6deaf494e5d460e.png]  
> 使用Bootstrap框架，按钮或者a标签鼠标移上去还有自带高亮效果，而且代码比较少

[Bootstrap]: https://v4.bootcss.com/
[09e1a628d6fc4699b0458f2014072ca1.png]: https://img-blog.csdnimg.cn/09e1a628d6fc4699b0458f2014072ca1.png
[30fa8c272b1f4151bc5133dba58783d3.png]: https://img-blog.csdnimg.cn/30fa8c272b1f4151bc5133dba58783d3.png
[460409df5c564fa7a8e1ff96aa442227.png]: https://img-blog.csdnimg.cn/460409df5c564fa7a8e1ff96aa442227.png
[f42ed748c6e6477e943d668b9e06e690.png]: https://img-blog.csdnimg.cn/f42ed748c6e6477e943d668b9e06e690.png
[9ac12b36a47e43dda6deaf494e5d460e.png]: https://img-blog.csdnimg.cn/9ac12b36a47e43dda6deaf494e5d460e.png