学编程,来源栈;先学习,再交钱
当前系列: Bootstrap和JQuery 修改

简介

中文官网:https://www.bootcss.com/

简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

回答了两个问题:

  1. 是什么:前端开发框架
  2. 为什么:让web开发更迅速、简单

历史/版本

最早是twitter的两名工程师开发并开源的……

Bootstrap2:立足于PC端,兼顾移动端,纯桌面项目可能仍然在使用

Bootstrap3:立足于移动端,兼顾PC端,sample.17bang使用

Bootstrap4:教学使用,和Bootstrap3相比

  • 更加面向CSS标准,不再兼容老式浏览器,比如IE6、IE7……
  • 使用flex布局
  • 其他一些调整/改进

Bootstrap5:最新版本,等子弹再飞一会


下载/安装

本质上,前端的CSS(以及Javascript)框架/类库,最终都是.css和.js文件,和我们自己创建的这些文件,没有本质区别。我们只需要直接在HTML页面中(通过CDN地址)引入即可使用。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"……
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"…… 

演示:查看/使用bootstrap.min.css中定义的元素和类选择器

<button class="btn btn-block btn-danger">源栈</button>
<hr />

注意:

  • integrity是一个用于确保下载资源完整性的hash值,但是测试时发现有问题,需要去掉……
  • 选择器智能提示需要安装VS Code插件

CDN引入可以直接用于生产环境,但为了演示/教学,我们也可以将其先下载到本地:

编译和压缩

CSS文档上说,可以分别下载:

  • 经过编译并立即可用的文件
  • 源文件

啥意思呢?

编译:.scss文件

bootstrap在(框架)开发过程中,使用了sass技术,一种“专业级CSS扩展语言”,可以:

  • 使用.scss文件
  • 在编写css代码时可以使用$符号来标识变量:
    .alert {
      padding: $alert-padding-y $alert-padding-x;

利用Sass,可以在CSS开发中设置/使用变量、进行运算等。

@想一想@:为什么要这样做呢?

比如我们要在很多地方、为很多元素设置同一个margin-top值20px,现目前我们的办法只能是:

  • 在开发中,记着这个值,不要写错了哟!
  • 那如果说以后我要把这所有的20px改成15px呢?你怎么办?一个一个的找,一个一个的改?

所以,我们定义一个变量,比如$max-margin-top,给它一个值,比如:$max-margin-top: 20px。然后所有需要进行css设置的地方都适用这个变量:

  • 不是:margin-top:20px
  • 而是:margin-top: $max-margin-top

那么,在开发中我不需要记这里究竟是20px还是15px,以后维护/修改的时候,要把20px改成15px,也只需要修改$max-margin-top: 15px即可。

此外,使用变量,还可以进行加减乘除等运算,比如:margin-bottom: $max-margin-top+5px……

但浏览器不能识别Sass,所以用Sass开发完成之后,还需要将其“转换”(Sass将其称之为“编译”)成css语法格式的代码。

压缩:.min文件

为了减少下载时的流量消耗,可以把.css(以及.js)文件中的:

  • 空格、换行、注释(如果需要的话)去掉
  • 变量名简写(js)

得到一个对应的.min文件

还原:.map文件

但我们在F12调试的时候,哪怕只是简单的引入了.min文件,却仍然能够看到未编译未压缩的源代码(演示)

这是为什么呢?因为.map(映射)文件记录了:

  • 如何找到对应的源文件
  • 简写变量名和原变量名之间如何映射,等等
PS:另外,bootstrap还使用了Autoprefixer 进行浏览器兼容性调整。

我们可以把下载下来的文件直接复制粘贴到项目中,也可以根据不同的IDE使用“逼格”更高一点的操作:

VS Code

使用npm安装,Ctrl+Shift+·打开Terminal

npm install bootstrap@4.6.1

@4.6.1指定版本号,默认为最新版本。

会将bootstrap所有文件(含源代码)存放在/node_module/bootstrap下(演示)

Visual Studio

在创建ASP.NET项目时,默认自带了bootstrap,其位于:

  • core:wwwroot\lib\bootstrap文件夹下

  • Framework(使用VS2019创建):
    • css文件放在\Content下
    • js文件放在\Scripts下
开箱即用,而且只有编译后(dist)文件。

eclipse

就下载后复制粘贴吧,^_^


布局:格栅

bootstrap-grid.css:用于bootstrap栅格系统布局的css部分内容

基本应用

将页面划分为:

  • container:一个容器里面可以有多行
  • row:一里面可以有多列
  • col:最多12,超出部分换行

注意:container和row联合使用,才能让row占满整个container(演示:container和row的margin/padding设置)

<div class="container">
    <div class="row">

列可以:

  • 合并宽度:
    <div class="col-2">col-2</div>
    <div class="col-4">col-4</div>
    <div class="col-6">col-6</div>
  • 偏移(但不是右对齐)
    <div class="offset-4">col-6</div>

还可以在row中指定其中每一列的宽度:

<div class="row row-cols-3">
每一列占row宽度的1/3。

底层实现

v4开始,广泛的使用了flex布局。

演示:.row中display: flex;

所以要注意:

  • row和col之间不能有额外的嵌套,会崩:
    <div class="row">
        <div>
            <div class="col-2">col-2</div>
            <div class="col-6">col-6</div>
        </div>
    </div>
  • 要想右对齐,需要使用:margin-left:auto

PS:v3使用的是float

响应式@media

首先,col-*-[1,9]中*可以使用:sm,md,lg和xl(响应式变量/动,Responsive variations),指定当屏幕宽度大于某px时适用的范围,详见文档


Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)

然后,多种类样式可以混用:

<div class="row">
    <div class="col-sm-4 col-lg-2 offset-lg-2">col-2</div>
    <div class="col-sm-8 col-lg-6 ">col-6</div>
</div>

最后,除了col-*,v4开始,sm/md/lg/xl也可以使用:container-*和row-col-*上了。

底层实现

F12演示:bootstrap中的@media使用……

不仅仅是格栅,其他地方也有用到


页面内容

reboot

bootstrap-reboot.css:为bootstrap的开发提供一个“基本盘”,类似于“清场”作用的代码。

但是,bootstrap.css已经合并了reboot和之前的grid,我们通常只需要直接引用bootstrap.css即可:

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css" >

排版

学习和体会:

  • 合理的使用语义标签,比如:mark、small、strong、del……
  • 意义清晰的类命名:display-*、lead……

列表(list)也放在了这一章节。

自学学会:

  • dl > dt, dd元素
  • 文本溢出截断后加“...”:
    text-overflow: ellipsis;

画像和图片

响应式

  • 类名:img-fluid
  • 原理:将 max-width: 100%; 和 height: auto;

thumbnail:加圆角边框和padding

包裹HTML元素picture和figure

其他参考工具类的:边框(圆角/圆)和 对齐

表格

#学习体会#:

  • 只在table上声明一个类,就可以设定其下所有tr、th、td等元素样式:善用选择器组合
  • 多个类“层层递进”的组合使用
    <table class="table table-hover">
  • hover不仅仅可用于a标签,这里还用于tr

仍然要注意:HTML元素固定的嵌套结构

v4引入了响应式,决定何时生成滚动条。


工具类utility

通常是将单个不变的 CSS 属性包装成一个类(class)(例如,.d-block代表的是display: block;)

按文档讲解,作用是:当你想使用某种样式的时候,优先考虑bootstrap里内置的类。

颜色和文字

border

文档有

  • 一个错误,应先指定使用border,然后再指定哪一边不用border
    <span class="border border-top-0">border-top-0</span>
  • 一个疏漏,可以同时指定使用多条border
    <span class="border-top border-bottom">border-right-0</span>
    

尺寸、间隔和溢出

记住首字母就OK了。

尺寸是相对父元素:

  • w:width
  • h:height
  • v:viewport
  • m:max

后面数字代表百分比

间隔包括内外边距:

  • m:margin
  • p:padding
  • t:top
  • l:left
  • r:right
  • b:bottom
  • n:negative(负数)
后接数字,以$spacer(默认1rem)为基数按比例换算。

flex和对齐

演示:了解文档中的bd-highlight

区分:flex中item的对齐,和inline/table中文本的对齐

浮动和定位

清除浮动clearfix:复习伪元素

Display和可见性

display:响应式的显示和隐藏

对比:invisible

其他:阴影/关闭按钮/sr-only……

源栈培训 前端 CSS
觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 Bootstrap和JQuery 中继续学习:

上一课: 已经是第一课了……

我们的 特色

  • 先学习,后付费
  • 线上/线下,自由组合

更多了解

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧