Bootstrap

云端之子

已于 2023-11-02 21:01:01 修改

阅读量860

点赞数 33

文章标签： bootstrap 前端 html

于 2023-10-31 20:45:03 首次发布

本文链接：https://blog.csdn.net/m0_72128887/article/details/134147229

版权

一、介绍

Bootstrap 是一个流行的开源前端框架，用于快速构建响应式和移动设备优先的网页。它由 Twitter 设计师和开发人员创建，提供了一套功能强大且易于使用的 CSS、JavaScript 组件和样式，可用于构建现代化的网站和应用程序。Bootstrap 是受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计，Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

以下是 Bootstrap 的一些主要特点和优势：

响应式设计：Bootstrap 可以根据不同的屏幕尺寸和设备自动调整布局，使网页在各种设备上都能提供一致的用户体验。
移动设备优先：Bootstrap 强调移动设备的优化，确保网站在小屏幕设备上显示良好，并提供了一些专门针对移动端的组件和样式。
网格系统：Bootstrap 提供了灵活的网格系统，使开发人员可以轻松地创建自适应网格布局，实现页面元素的排列和调整。
CSS 组件：Bootstrap 包含了丰富的 CSS 组件，例如按钮、表单、导航栏、标签页等，可以轻松构建各种常见的界面元素。
JavaScript 插件：Bootstrap 内置了多种实用的 JavaScript 插件，如轮播图、模态框、下拉菜单等，可通过简单的 HTML 标记和 CSS 类来使用，并提供了丰富的选项和配置。
自定义主题：Bootstrap 提供了可定制的主题，开发人员可以根据自己的需要修改颜色、字体、样式等，以满足项目的视觉要求。
文档和支持：Bootstrap 提供了详细的文档和示例，新手可以轻松入门，并且社区中有许多开发人员和设计师提供的资源和支持。

二、使用

Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为5.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。https://www.bootcss.com/ 里面介绍了如何使用（直接Ctrl C+V使用）

举例：

使用前需要引入bootstrap

在webapp目录下直接创建demo01.html文件，并引入Bootstrap的资源。

引入bootstrap.min.css

引入jquery.min.js

引入bootstrap.min.js

jquery文件的引入必须先于Bootstrap.js文件的引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--   1. 引入bootstrap的css样式  ( 外部式 )-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!--   2. 引入jQuery 2.0-->
    <script src="bootstrap/jquery-2.1.4/jquery.min.js"></script>
    <!--   3.引入bootstrap.js-->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>