Bootstrap（6）前端

2022年9月30日12:14:18

1 介绍

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

boostrap中文网：https://www.bootcss.com/
boostrap4下载地址：https://v4.bootcss.com/docs/getting-started/download/

  目前使用较广的是版本2、3和4，其中2的最新版本的是2.3.2，3的最新版本是3.4.1，4的最新版本是4.5.1,在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面：
（1）从 Less 迁移到 Sass
（2）改进网格系统
（3）缺省弹性框支持
（4）Dropped wells, thumbnails, and panels for cards
（5）合并所有 HTML resets 到一个新的模块中：Reboot
（6）全新自定义选项
（7）不再支持 IE8
（8）重写所有的 JavaScript 插件
（9）改进工具提示和 popovers 的自动定位
（10）改进文档

bootstrap的优点：
（1）移动设备优先。
（2）自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
（3）各种浏览器的支持。
（4）容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
（5）快速开发：bootstrap给我提供了大量的样式，布局解决方案和插件库，可以让程序员从基本的样式设计和调试上解放，快速搭建项目。同时bootstrap还给我们提供了大量的常用网页组件，可以让我们直接复制代码后,简单修改即可使用。ctrl-c ctrl-v
（6）响应式设计：Bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机。
（7）它为开发人员创建接口提供了一个简洁统一的解决方案。
（8）包含了功能强大的内置组件，易于定制。
（9）提供了基于 Web 的定制。
（10）完全开源。

2 使用方法

（1）先去官网下载相应的CSS和JavaScirpt封装的Bootstrap包
Bootstrap（6）前端

（2）解压数据，然后复制到自己的web项目中
Bootstrap（6）前端

（3）创建你要编写的页面，然后用<script>标签导入CSS和JS文件。（如果不想，也可以直接用<script>引入Bootstrap的CDN静态资源库）

普通导入方式

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/bootstrap.min.css"/><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/bootstrap.bundle.min.js"></script><scriptsrc="js/bootstrap.min.js"></script></head><body></body></html>

Bootstrap（6）前端
cdn方式

<!-- 新 Bootstrap 核心 CSS 文件 --><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-p1KAotb3W9ndluCsqePPYnjRm3c6abdnIjo0tQwYUv83VsbsYd43RuofnFAaDo0E"crossorigin="anonymous"><!-- jQuery and JavaScript Bundle with Popper --><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"integrity="sha384-E5Sj1saJVFNzWWK3YIJB4LEDEEVEGaOdfmCprPDkfWUo+xkb6Ep52Q1TMEtgcFwi"crossorigin="anonymous"></script>

（4）从官网中招相应你想要的组件，然后复制相应的代码到自己的项目中

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/bootstrap.min.css"/><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/bootstrap.bundle.min.js"></script><scriptsrc="js/bootstrap.min.js"></script></head><body><buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-secondary">Secondary</button><buttontype="button"class="btn btn-success">Success</button><buttontype="button"class="btn btn-danger">Danger</button><buttontype="button"class="btn btn-warning">Warning</button><buttontype="button"class="btn btn-info">Info</button><buttontype="button"class="btn btn-light">Light</button><buttontype="button"class="btn btn-dark">Dark</button><buttontype="button"class="btn btn-link">Link</button></body></html>

效果就出来了，如下图
Bootstrap（6）前端

总结:

（1）bootstrap是一款优秀的前端框架，它能够让我们快速搭建项目，现有大量样式库可以供我们使用，可以帮助我们实现快速开发，使用bootstrap的感受基本上就是ctrl+c然后ctrl+v ，修改一下就可以实现前端页面的快速开发。
（2）bootstrap在导入js文件时，要求顺序是先导入jQuery，然后是popper.js(包含于bootstrap.bundle.min.js中)，最后是bootstrap.min.js
（3）不同的版本对于jQuery版本的要求时不一致的，导入时要注意jQuery的版本。

3 流容器和固定容器

什么是容器？
  Bootstrap 4 需要一个容器元素来包裹网站的内容，说白了就是要用一些标签来装其他的标签，这样便于我们对网页做整体的布局设计，一般我们选择用div来做容器，对应的容器类有两个，一个是固定容器.container 一个是流容器.container-fluid。

容器类介绍
（1）.container 类用于固定宽度并支持响应式布局的容器。
（2）.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器（会自适应变化）。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/bootstrap.min.css"/><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/bootstrap.bundle.min.js"></script><scriptsrc="js/bootstrap.min.js"></script></head><body><divclass="container"><h1style="background-color: gainsboro;">我的第一个 Bootstrap 页面</h1><p>这是一些文本。</p></div><divclass="container-fluid"><h1style="background-color: gainsboro;">我的第一个 Bootstrap 页面</h1><p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p></div></body></html>

Bootstrap（6）前端
两者区别：
（1）固定容器的响应式布局规则是当窗口大小变化时，在指定的宽度范围内使用固定的宽度。
（2）流容器的响应式布局规则是随着窗口大小的变化一同变化，横向全部占满。

固定容器的阈值如下图:
Bootstrap（6）前端

4 栅格系统

  Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要定义列数。

Bootstrap 4 网格系统有以下 5 个类:
（1）.col- 针对所有设备
（2）.col-sm- 平板 - 屏幕宽度等于或大于 576px
（3）.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
（4）.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
（5）.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

网格系统规则:
（1）网格每一行需要放在设置了.container (固定宽度) 或.container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
（2）使用行来创建水平的列组class=row。
（3）内容需要放置在列中，并且只有列可以是行的直接子节点。
（4）预定义的类如.row 和.col-sm-4 可用于快速制作网格布局。
（5）列通过填充创建列内容之间的间隙。 这个间隙是通过.rows 类上的负边距设置第一行和最后一列的偏移。
（6）网格列是通过跨越指定的 12 个列来创建。 （例如，设置三个相等的列，需要使用三个.col-sm-4 来设置。）
（7）Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。 如果您想了解有关Flexbox的更多信息，可以阅读我们的CSS Flexbox教程。

案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><!--移动端优先的配置--><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--bootstrap的样式库--><linkrel="stylesheet"href="css/bootstrap.min.css"><!--jQuery--><scriptsrc="js/jquery.min.js"></script><!--popper--><scriptsrc="js/bootstrap.bundle.min.js"></script><!--核心js文件--><scriptsrc="js/bootstrap.min.js"></script></head><body><divclass="container"><divclass="row"><divclass="col-sm-2"style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns</div><divclass="col-sm-8"style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns</div><divclass="col-sm-2"style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns</div></div><divclass="row"><divclass="col-sm-1"style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns</div><divclass="col-sm-4"style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns</div><divclass="col-sm-7"style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns</div></div></div></body></html>

Bootstrap（6）前端

5 导航栏

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><!--移动端优先的配置--><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--bootstrap的样式库--><linkrel="stylesheet"href="css/bootstrap.min.css"><!--jQuery--><scriptsrc="js/jquery.min.js"></script><!--popper--><scriptsrc="js/bootstrap.bundle.min.js"></script><!--核心js文件--><scriptsrc="js/bootstrap.min.js"></script></head><body><divclass="container"><h2>欢迎学习导航栏</h2><br><!-- Nav pills --><ulclass="nav nav-pills"role="tablist"><liclass="nav-item"><aclass="nav-link active"data-toggle="pill"href="#home">主页</a></li><liclass="nav-item"><aclass="nav-link"data-toggle="pill"href="#menu1">导航栏1</a></li><liclass="nav-item"><aclass="nav-link"data-toggle="pill"href="#menu2">导航栏2</a></li><liclass="nav-item"><aclass="nav-link"data-toggle="pill"href="#menu3">导航栏3</a></li></ul><!-- Tab panes --><divclass="tab-content"><divid="home"class="container tab-pane active"style="border: 10px solid red;"><br><h3>主页</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><divid="menu1"class="container tab-pane fade"style="border:
  • 作者：jaydenStyle
  • 原文链接：https://jayden.blog.csdn.net/article/details/124596691
    更新时间：2022年9月30日12:14:18 ，共 7079 字。