Bootstrap 快速入门之第一章入门&全局CSS之概览&栅格系统

渊婉

于 2022-04-29 16:15:33 发布

阅读量1.1k

点赞数 2

文章标签： bootstrap css javascript

本文链接：https://blog.csdn.net/qq_61313896/article/details/124483725

版权

Bootstrap是Twitter出品的前端框架，提供响应式布局和丰富的组件。本文将介绍Bootstrap的概念、环境安装，深入讲解Bootstrap CSS，包括移动设备优先、响应式布局，并通过案例展示栅格系统的应用。

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

一：概念

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

广泛在企业网站、博客、网站后台之类的网站使用

好处：
① ：定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。
② ：响应式布局：同一套页面可以兼容不同分辨率的设备。 ③：移动设备优先 ④：浏览器支持 ⑤：容易上手

二：环境安装

1.下载Bootstrap库

下载地址：http://www.bootcss.com/

自行在官网中下载，下载的Bootstrap如下：

2.页面中引入库

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

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

③：bootstrap.min.js：Bootstrap核心库

导入的库如下：


 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
		<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>