BootStrap

最新推荐文章于 2022-08-18 21:39:46 发布

_十二.

最新推荐文章于 2022-08-18 21:39:46 发布

阅读量164

点赞数 2

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_57287269/article/details/124085436

版权

什么是bootstrap？

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，是基于html和JavaScript、css三者开发的框架，主要用于响应式网站上的结构和布局。

为什么使用 Bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

Bootstrap 包含的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件部分详细讲解。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

bootstrap框架怎么用？

第一步：首先将bootstrap下载下来后，放在一个专门的文件夹下

第二步：在HTML框架中添加如下代码（如下代码可以通过官网--入门--基础模板找到）

        <!-- 引入jQuery库 -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<!-- 引入 bootstrap 的 js 库 -->
		<script type="text/javascript" src="js/bootstrap-5.0.2/dist/js/bootstrap.js"></script>
		<!-- 引入 bootstrap 的 css 库 -->
		<link rel="stylesheet" type="text/css" href="js/bootstrap-5.0.2/dist/css/bootstrap.css" />
		<!-- 引入字体图片css文件 -->
		<link rel="stylesheet" type="text/css" href="js/icons-1.5.0/font/bootstrap-icons.css" />

第三步：在使用bootstrap框架的时候，需要先定义一个名为container的类，container类名是固定的，不能根据自己的喜好自定义：