--- theme: condensed-night-purple --- 这是我参与2022首次更文挑战的第12天，活动详情查看：[2022首次更文挑战](https://juejin.cn/post/7052884569032392740 "https://juejin.cn/post/7052884569032392740") # Bootstrap入门笔记 >`Bootstrap`是一种Web前端开发框架，它为大多数标准的UI设计场景提供了用户友好的、跨浏览器的解决方案。它现成可用且经受了社区考验的`HTML`标记、`CSS`样式及`JavaScript`行为的组合，极大地提高了Web前端界面的开发效率，创造了让人愉悦的效果。Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。当然，还有可以用作响应式的栅格系统！ ## 一. 简化版教程（纯新手食用） ### 1. 用法 - 引入：在html文件开头**引入**别人写好的CSS文件 ~~~html ~~~ ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e8db6b2500245658953c0c13b2848e8~tplv-k3u1fbpfcp-watermark.image?) - 使用：自己只需要在需要的**标签元素**那里**设置特定的class属性**就行。比如一个按钮，给它加上class属性，就能顺带修改它的样子了。~~（有手就会）~~ ~~~html ~~~ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33e3f6052acd4fd7b5fe9ef5bd632252~tplv-k3u1fbpfcp-watermark.image?) ### 2. 类名 > 那么问题来了，怎么知道要改成哪些类名class呢？表格参考网址：https://v3.bootcss.com/css/#tables 按钮参考网址：https://v3.bootcss.com/css/#buttons 其他的继续找就能找到啦~ ### 3. 布局（栅格系统） > Bootstrap的核心，也是它响应式布局的一个亮点。能在页面上左右排版自己的东西。简化用法说明(正常PC端)：在`class= row`中嵌套 `class = col-md-数字`就行。参考网址：https://v3.bootcss.com/css/#grid-example-basic ~~~html Document

col-md-1

col-md-2

col-md-3

col-md-4

~~~ ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32b92fbf7571457b9ab0def9ab45201b~tplv-k3u1fbpfcp-watermark.image?) > 类名里面的数字代表占有几列，而一行中默认有12列。 > > 里面的md针对中等屏幕设备生效。 > > 针对超小屏幕设备所定义的类，即 `.col-xs-*` > > 针对平板设备的 `.col-sm-*` 类里面还有一种类名代表偏移的：https://v3.bootcss.com/css/#grid-offsetting ## 二. 细致版教程 ### 1. 环境搭建 1. [下载](#downloadLink)预编译压缩的bootstrap到本地，再导入项目中去。 2. 从CDN直接引入 ~~~HTML ~~~ ~~~HTML Bootstrap HelloWorld

你好，世界！

~~~ ### 2. 基本模板不要觉得下面的代码和上面一样，实际还是有点区别的。如果用到的CSS样式不依赖于JS插件，是可以不用引入jQuery那些JS文件的。 ~~~HTML Bootstrap 101 Template

你好，世界！

~~~ ### 3. 响应式布局 > 同一套页面可以兼容不同分辨率的设备 > > 实现：依赖于**栅格系统**。随着屏幕尺寸的增加，系统会自动分为最多12列。栅格系统的使用方法：说白了就是用定义好的类（class） #### 容器 > 相当于之前的table。 `.container` 类用于固定宽度并支持响应式布局的容器，两边留白。 `.container-fluid` 类用于 100% 宽度，占据全部视口（viewport）的容器。（这两种容器类不能互相嵌套） #### 行 > 相当于之前的tr。 - “行（row）”必须包含在 `.container` （固定宽度）或 `.container-fluid` （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 - 通过“行（row）”在水平方向创建一组“列（column）”。 #### 列 > 指定该元素在不同设备上的所占的格子的数目。格式：col-设备代号-格子数目设备代号： xs：超小屏幕，手机（<768px） sm：小屏幕平板 (≥768px) md：中等屏幕桌面显示器 (≥992px) lg：大屏幕大桌面显示器 (≥1200px) - 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 - 类似 `.row` 和 `.col-xs-4` 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列（column）”设置 `padding` 属性，从而创建列与列之间的间隔（gutter）。通过为 `.row` 元素设置负值 `margin` 从而抵消掉为 `.container` 元素设置的 `padding`，也就间接为“行（row）”所包含的“列（column）”抵消掉了`padding`。 #### 注意 > 一行中如果格子数目超过12，则超出部分自动换行。 > > 栅格属性可以向上兼容。小屏幕定义的属性适用于大屏幕。 > > 如果设备宽度小于栅格类元素属性设置的最小宽度，那么一个元素会占满一行。 - 案例 ```html

一共12列

1列

占4列

``` ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd18226c639042bea93aeb6c12b45a16~tplv-k3u1fbpfcp-zoom-1.image) #### 列偏移使用 `.col-md-offset-*` 类可以将列向右侧偏移。这些类实际是通过使用 `*` 选择器为当前元素增加了左侧的边距（margin）。例如，`.col-md-offset-4` 类将 `.col-md-4` 元素向右侧偏移了4个列（column）的宽度。 #### 嵌套列为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 `.row` 元素和一系列 `.col-sm-*` 元素到已经存在的 `.col-sm-*` 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。 #### 列排序通过使用 `.col-md-push-*` 和 `.col-md-pull-*` 类就可以很容易的改变列（column）的顺序。下面做个简单的区分，其中push和offset类似。 col-md-offset-3（在**左侧**补充3列） col-md-push-8（从**左侧**往右侧推8列） col-md-pull-2（往**左侧**拉2列） #### 语义化布局 Less mixin 和变量除了用于快速布局的[预定义栅格类](https://v3.bootcss.com/css/#grid-example-basic)，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。 ##### 变量 ```scss @grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px; ``` ##### mixin 例子： ~~~CSS .wrapper { .make-row(); } .content-main { .make-lg-column(8); } .content-secondary { .make-lg-column(3); .make-lg-column-offset(1); } ~~~ ### 4. 样式 #### 全局css样式 - 按钮： - `` - `` - `` - `` - `class="btn btn-warning" 警告按钮` - `class="btn btn-danger" 危险按钮` - `class="btn btn-link"` 链接按钮 ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41d83f3b11f244fb9bfabf1f3fe65c2c~tplv-k3u1fbpfcp-zoom-1.image)

类样式	描述
.btn	圆角灰色按钮，为了让按钮不那么尖锐，我们的按钮都应该使用这个样式来获得圆角，然后再覆盖上其他的特性。
.btn-default	默认/标准按钮，白色的按下灰色。
.btn-primary	原始按钮样式（未被操作），这个跟active相对应，他是一个按钮没被操作的样式，而active是按钮被点击时显示的相应的样式。
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	大按钮
.btn-sm	小按钮
.btn-xs	超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击，按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
.disabled	禁用按钮，颜色会变淡 50%，并失去渐变。

- 图片 ```html 在div中指定class=img-responsive使图片支持响应式布局 //图片形状 xxx

//方形

//圆形

//相框 ``` - 表格 ```html

列名1	列名2
列值1	列值2

//class="table table-striped":条纹状表格 //class="table table-bordered":带边框的表格 //class="table table-condensed":紧凑表格（单元格中的内补（padding）均会减半） //响应式表格:(屏幕小了就加上滑动条)

...

标签是用于对段落中大量的引用加引号. - 内联条可以让所有元素放在同一行 `display: inline-block;` 或 ```html

...

``` #### 组件 - 导航条 > - 使用nav元素定义，`
` > - 定义反色的导航条设置`class="navbar navbar-inverse"` > - 只支持 `
...
``` （给父元素添加 `.dropup` 类就能使触发的下拉菜单朝上方打开。） ### 6. 总结 - 不会就查官方文档 - 导入时注意不要覆盖了自己的样式 ## 三. 参考网址 Bootstrap中文文档：https://www.bootcss.com/ 掘金快速入门文章：https://juejin.cn/post/6922393100333613070 ## 四. 其他CSS库推荐 ### Spectre.css > Spectre.css 是一套轻量化、响应式的现代CSS框架，用于实现更快、可扩展性更强的开发能力。Spectre提供多种排版与元素的基本样式，基于Flexbox的响应式布局机制，外加纯CSS组件与工具程序。 Gitee 网址：https://gitee.com/mirrors/Spectre.css 用法：同Bootstrap类似，都是加上特定类名就OK了，但是体量要比Bootstrap小一点。 ### fontawesome > 一套绝佳的字体及CSS样式库官网：https://fontawesome.dashgame.com/ 用法：类名即样式。但是里面的样式和bootstrap那种经典样式不太一样。 ### ElementUI > 可以称得上是Vue框架的配套CSS库。官网（快速上手）：https://element.eleme.cn/#/zh-CN/component/quickstart 用法：使用一些特定的“HTML标签”，比如``,``等等即可。（当然，主要和vue中的JS部分搭配使用控制数据，比如分页组件，卡片组件，效果极佳。）