Bootstrap前端组件库+构建管理

最新推荐文章于 2024-04-16 18:07:00 发布

贾明恣

最新推荐文章于 2024-04-16 18:07:00 发布

阅读量1.3k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43342290/article/details/115796544

版权

Bootstrap使用Grunt来构建CSS、JavaScript，并用Jekyll来写作文档。Grunt是Node.js中一个JavaScript的任务管理器，也可以使用其他工具与技术来构建BootstrapBootstrap的版本默认版本、支持Flexbox的版本、仅包含网格系统的版本Bootstrap内置一个移动优先、12栏布局的响应网格系统Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本

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

建立可伸缩的甚至是响应式组件的方式：弹性盒、网格和多栏布局、媒体查询
为了建立响应式设计（已经广受浏览器支持），我们一般最常探测的特征是视口宽度，而且我们可以使用min-width、max-width和width媒体特征，在视口宽度大于或者小于某个大小——或者是恰好处于某个大小——的时候，应用CSS。

为了让 CSS 中的尺寸设置更加直观，我们将全局的 box-sizing 从 content-box 调整为 border-box。这样可以确保 padding 的设置不会影响计算元素的最终宽度，但是会导致某些第三方软件（例如 Google Maps 和 Google Custom Search Engine）出现问题。
Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。使用Grunt来构建CSS、JavaScript，并用Jekyll来写作文档。

Grunt是Node.js中一个JavaScript的任务管理器，可用来打造构建系统。也可以使用其他工具与技术来构建Bootstrap

Bootstrap的版本
默认版本、支持Flexbox的版本、仅包含网格系统的版本

Bootstrap内置一个移动优先、12栏布局的响应网格系统

Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。在 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

Bootstrap的功能有很多
在这里插入图片描述

构建管理

Grunt

安装Node.js和npm之后系统全局安装Grunt
Bootstrap的软件包中自带构建流程。
使用任务管理器创建Bootstrap项目的构建流程：将Sass代码编译为css代码、处理JavaScript代码、运行静态web服务器来测试结果，可以把流程复用到自己的新项目中

Sass

Bootstrap v4 版本使用 Node Sass 工具将 Sass 源码文件编译为 CSS 文件（已包含在我们的构建流程中了）。如果你需要自己编译 Sass 源码的话，为了保证最终生成的 CSS 与官方保持一致，你所使用的 Sass 编译器至少要支持 Node Sass 所支持的所有功能。推荐Dart Sass
https://sass.bootcss.com/
规则嵌套提供代码效率
@变量
混入
操作：自带一些颜色函数，e.g：darken
文件引入，模块化css文件

JavaScript

几乎所有的 Bootstrap 插件都可以通过带有 data 属性的 HTML 元素单独开启和配置（我们推荐 JavaScript API 为首选方式）。请确保仅在单个 HTML 元素上使用同一个插件的 data 属性（例如，你不能通过同一按钮触发工具提示和模态框。）

$(document).off('.alert.data-api')

使用 Bootstrap 自带的 npm 脚本来构建文档、编译源码、运行测试等。

Bootstrap 为大多数插件的独特行为提供了自定义事件。
事件的命名以不定式或过去分词形式出现，例如，在事件开始时触发的事件名时不定式形式的（例如 show），在事件完成时触发的事件名是过去分词形式的（例如 shown）。
所有方法都可以接受三种参数形式：对象类型的参数、字符串类型的参数（将被当作是某个方法的名称）或没有参数（将以默认行为启动插件）：
所有不定式形式命名的事件都提供 preventDefault() 功能。这就赋予了你在动作开始之前将其停止的能力。如果事件处理函数的返回值是 false，将自动调用 preventDefault()。
一旦 JavaScript 被禁用，Bootstrap 的插件没有优雅降级的方案。如果你很关心在这种情况下的用户体验，请使用标签并向你的用户解释情况（以及重新启用 JavaScript 的方法），和/或添加你自己的降级方案。

Bootstrap作为前端组件库

前端开发选择组件库很重要，需要考虑是否含有所需组件、代码量级、技术配合等因素
Bootstrap、element-UI、Ant Design的核心区别在于组件库。
Bootstrap是基于jQuery的DOM操作的，Vue有VNode的概念不是很契合。
一篇很细节的jQuery的DOM操作博客
ps:现在有BootstrapVue
但是element-UI、Ant Design原生就是用Vue实现的组件库。
也可以组合使用

react就选Bootstrap

一些语法

媒体查询

CSS媒体查询为你提供了一种应用CSS的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候CSS才会真的被应用
all
print
screen
speech

@media media-type and (media-feature-rule) {
   
  /* CSS rules go here */
}

@media screen and (width: 600px) {
   
    body {
   
        color: red;
    }
}

and、not、only、or 逗号

辅助类

Bootstrap 提供了一些帮助器类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。
.visible-xs
.hidden

栅栏系统

使用行列构建页面超出最大列宽12会换行行类可以写多个表示不同分辨率下显示
offset偏移和纳入列宽，大于12也会换行
push/pull列的微调不受总和12的限制

bootstrap栅栏系统css中的col-xs-、col-sm-、col-md-* 的意义：
.col-xs- 超小屏幕手机 (<768px)
.col-sm- 小屏幕平板 (≥768px)
.col-md- 中等屏幕桌面显示器 (≥992px)
.col-lg- 大屏幕大桌面显示器 (≥1200px)

补充

调整高度后可以使用 div.clearfix避免影响下面的行

dl水平短语列表下的dt dd 默认是分别占据一行的, 如果有class=“dl-horizontal” 下dt dd在一行
table tr td 表格使用class=table table-striped table-bordred添加样式
striped 斑马线 hove鼠标焦点 condensed 压缩
给tr添加背景色class=active | success | info | warning | danger
表格字数超长默认换行,不换行滑动使用外部容器+.table-responsive

form表单内部的提交的价值对添加form-group

代码示例

在这里插入图片描述

媒体查询

visible-md-8 hidden-xs pc端显示手机端隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个模板</title>
<style>
* {
   
    box-sizing: border-box;
}

body {
   
    width: 90%;
    margin: 2em auto;
    font: 1em/1.3 Arial, Helvetica, sans-serif;
}

a:link,
a:visited {
   
    color: #333;
}

nav ul,
aside ul {
   
    list-style: none;
    padding: 0;
}

nav a:link,
nav a:visited {
   
    background-color: rgba(207, 232, 220, 0.2);
    border: 2px solid rgb(79, 185, 227);
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #333;
    font-weight

最低0.47元/天解锁文章

贾明恣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap前端组件库+构建管理

Bootstrap使用Grunt来构建CSS、JavaScript，并用Jekyll来写作文档。Grunt是Node.js中一个JavaScript的任务管理器，也可以使用其他工具与技术来构建BootstrapBootstrap的版本默认版本、支持Flexbox的版本、仅包含网格系统的版本Bootstrap内置一个移动优先、12栏布局的响应网格系统Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本
复制链接

扫一扫

专栏目录