B站上新 | 玩转热门前端开发框架-Bootstrap学习小记

hello，各位小伙伴~

欢迎来到本周的B站上新

本周为大家准备了前端开发的必学工具库-BootStrap的相关知识点

首先看一下该工具库的基础介绍吧

01

BootStrap-前端开源工具库

✦

Bootstrap 是全球最受欢迎的前端开源工具库，它支持Sass混合、响应式矩阵系统和它自带的库分量和分量的JavaScript。Boostrap 是全球最流行的前端框架，用于制造响应式模板、移动设备优先的 WEB 站点。基于Bootstrap提供强大的功能，能够让你快速设计和自定义你的网站。

02

BootStrap-优势

✦

1.移动设备优先：框架包含了贯穿于整个库的移动设备优先的样式；

2.浏览器支持：所有的主流浏览器都支持 Bootstrap。-->Internet Explorer Firefox Opera Google Chrome Safar；

3.容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap；

4.响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机；

5.它为开发人员创建接口提供了一个简洁统一的解决方案；

6.它包含了功能强大的内置组件，易于定制；

7.提供了基于 Web 的定制；

03

BootStrap-内容

✦

1.基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构；

2.CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统；

3.组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等；

4.JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件；

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

04

BootStrap-环境搭建

✦

1.下载Bootstrap库

2.页面中引入库

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

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

bootstrap.js：Bootstrap核心【添加到之前】

我们的环境已经搭建好了

现在可以上手试一试啦

你准备好了吗？

05

创建一个 Bootstrap 4 页面

✦

1.添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。

HTML5 doctype 在文档头部声明，并设置对应编码:

2.移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

3.容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

06

Bootstrap4 图像形状

✦

1.圆形与椭圆形

例子：

2. 左右对齐方式

例子：

3.响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在标签中添加 .img-fluid 类来设置响应式图片。

.img-fluid 类设置了 max-width: 100%; height: auto。

B站上新

本周B站上新-Bootstrap4前端组件库

完整讲解Bootstrap4架构设计与实现方案

从原理与实践两方面深入Bootstrap4开发环境

从场景出发落地Bootstrap4组件的集成和应用

覆盖面广，涉及Bootstrap4架构的各个技术点

对于前端开发感兴趣的小伙伴一定不要错过今天的学习内容哈

直通B站

扫码开始学习

添加东小萌QQ

领取学习资料

关

于

我 们

||

往期精选

B站上新 | 玩转热门前端开发框架-Bootstrap学习小记B站上新 | Redis缓存原理及实战B站上新 | 这是我见过讲的最好的Mybatis进阶教程了B站上新 | Spring框架-为企业应用提供一站式的解决方案

注：本文内容来源于CSDN博主「WildKingxue」、「『九离~空白』」、「猪大爷爱你」、「脑袋不灵光的小白羊」的原创文章。

原文链接：

原文链接：

原文链接：

原文链接：