bootstrap常用组件的使用

最新推荐文章于 2024-04-30 15:44:23 发布

lipeiwen1998

最新推荐文章于 2024-04-30 15:44:23 发布

阅读量577

点赞数

本文链接：https://blog.csdn.net/lipeiwen1998/article/details/107702452

版权

本文介绍了Bootstrap，一个流行的前端开发框架，用于构建响应式布局的WEB项目。内容包括Bootstrap的环境搭建，如通过CDN引入和本地下载，以及如何使用栅格系统、下拉菜单、模态框和导航等组件。Bootstrap的栅格系统提供了一套移动设备优先的流式布局，适用于不同屏幕尺寸。此外，还展示了下拉菜单和模态框的实现示例。

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

bootstrap是什么？

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

bootstrap环境搭建

1、CDN引入方式
Bootstrap 中文网为 Bootstrap 专门构建了免费的 CDN 加速服务

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

注：Bootstrap 的 JavaScript 文件是基于jQuery，所以在引入此文件之前请务必先搭建好jQuery的开发环境
2、下载本地Bootstrap文件
文件结构
预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
在这里插入图片描述
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.），以及已编译压缩的 CSS 和 JS（bootstrap.min.）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

Bootstrap 源代码
如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：
在这里插入图片描述
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

bootstrap的运用

1、栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

简介：栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%
宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) {
    ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) {
    ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (mi