![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Bootstrap
文章平均质量分 75
XI_MILU
这个作者很懒,什么都没留下…
展开
-
Bootstrap笔记(十八) 常用类别 - 垂直对齐
常用类别 - 垂直对齐垂直对齐垂直对齐Bootstrap提供以下各种垂直对齐类别:範例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w原创 2021-09-16 16:02:34 · 376 阅读 · 0 评论 -
Bootstrap笔记(十七) 常用类别 - 设定宽度、高度大小
常用类别 - 设定宽度、高度大小设定宽度设定高度设定宽度我们可以使用 .w-* 类别设定HTML元素佔父元素宽的百分比。设定值有: 25、50、75、100和auto,分别代表25%、50%、75%、100%和auto(自动,预设值)。**範例: **<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp原创 2021-09-16 15:41:17 · 4566 阅读 · 0 评论 -
Bootstrap笔记(十六) 常用类别 - 显示层级与隐藏元素
常用类别 - 显示层级显示层级隐藏元素显示层级Bootstrap提供了一些类别来变更HTML元素的CSS的display属性,而且这些类别具有响应式特点,其命名形式如下:xs的层级类别: .d - { 设定值 } sm、md、lg、xl、xxl的层级类别: .d - { 断点 } - { 设定值 } 设定值如下:none: 不显示。inline: 行内层级 (不换行)。block: 区块层级 (换行)。inline-block: 不换行,但可以设定宽度、高度、padding与ma原创 2021-09-16 15:08:20 · 907 阅读 · 0 评论 -
Bootstrap笔记(十五) 常用类别 - 阴影
常用类别 - 阴影阴影阴影Bootstrap提供以下类别用来设定阴影:範例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2021-09-16 11:30:04 · 577 阅读 · 1 评论 -
Bootstrap笔记(十四) 常用类别 - 间距
常用类别 - 间距间距间距Bootstrap提供的间距类别可以套用到 xs ~ xxl 等响应式断点,命名形式如下:xs的间距类别命名形式为 {property} {sides} - {size}sm、md、lg、xl、xxl的间距类别命名形式为 {property} {sides} - {breakpoint} - {size}property(属性)的设定值如下:m : 边界 (margin)p : 留白 (padding)sides(边)的设定值如下:t : 上方 (ex.原创 2021-09-16 10:56:35 · 3165 阅读 · 0 评论 -
Bootstrap笔记(十三) 常用类别 - 文绕图
常用类别 - 文绕图文绕图种类解除文绕图响应式文绕图文绕图种类靠左文绕图 .float-start 靠右文绕图 .float-end 没有文绕图 .float-none 範例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-09-15 15:44:20 · 490 阅读 · 0 评论 -
Bootstrap笔记(十二) 常用類別 - 色彩
常用類別 - 色彩文字色彩背景色彩文字色彩Bootstrap提供以下類別用來設定文字色彩 :範例: 文字色彩不同的文字色彩類別會呈現不同的文字色彩,其中最後一行在 .text-black 類別後面多加上 -50 ,讓文字色彩呈現半黑。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"原创 2021-09-15 13:33:38 · 106 阅读 · 0 评论 -
Bootstrap笔记(十一) 表格篇
表格篇表格样式与效果表格内容的垂直对齐方式特定意义色彩类别响应式表格参考资料表格样式与效果Bootstrap提供以下类别用来设定表格样式与效果:範例1: 表格与标题 使用 .table 类别,自动套用Bootstrap提供的表格样式,包括宽度、高度、框线、背景色彩、储存格间距等。 使用 .caption-top 类别,使标题显示在表格上方。<!DOCTYPE html><html lang="en"><head> <meta cha原创 2021-09-04 03:02:27 · 604 阅读 · 0 评论 -
Bootstrap笔记(十) 图片篇
图片响应式图片响应式图片指的是图片会随着父元素的宽度自动缩放,最大宽度为图片的原尺寸。制作响应式图片只要在 <img>元素加上 .img-fluid 类别,图片就会套用 max-width:100%; 和 height:auto; 两个属性成为响应式图片。範例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv=原创 2021-08-22 15:51:15 · 870 阅读 · 0 评论 -
Bootstrap笔记(九) 排版 - 清單
排版 - 程式碼Bootstrap支援下列HTML元素用來排版程式碼範例:在这里插入代码片原创 2021-08-20 16:27:14 · 107 阅读 · 0 评论 -
Bootstrap笔记(八) 排版 - 程式碼
排版 - 程式碼Bootstrap支援下列HTML元素用來排版程式碼範例1: 各元素的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w原创 2021-08-19 18:22:51 · 87 阅读 · 0 评论 -
Bootstrap笔记(七) 排版 - 文字篇
排版 - 文字文字对齐Bootstrap提供了以下文字对齐类别範例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init原创 2021-08-19 16:52:09 · 333 阅读 · 0 评论 -
Bootstrap笔记(六) 排版 -段落与縮寫
段落与行内文字强调段落若要强调网页上的某个段落,可以加上 .lead 类别。範例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt原创 2021-08-19 14:40:02 · 237 阅读 · 0 评论 -
Bootstrap笔记(五) 排版 - 标题
标题主标题Bootstrap支援 <h1> ~ <h6>等HTML标题元素,也提供 .h1 ~ .h6 类别用来设定标题1 ~ 标题6 (两种写法效果相同) ,其中h1标题的字体最大,h6字体最小。範例1: 使用HTML标题元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp原创 2021-08-17 17:10:49 · 202 阅读 · 0 评论 -
Bootstrap笔记(四) 网格系统 - column的宽度、位移、换行与顺序
网格系统 - column的宽度、位移、换行与顺序column的宽度我们可以使用Bootstrap提供的 .col 类别设定column宽度。範例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view原创 2021-08-12 17:27:38 · 1337 阅读 · 0 评论 -
Bootstrap笔记(三) 网格系统 - row与column的对齐方式
网格系统 - row与column的对齐方式row的垂直对齐方式我们可以使用 .align-items-* 类别设定row的垂直对齐方式。.align-items-start垂直向上对齐.align-items-center垂直置中对齐.align-items-end垂直向下对齐範例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-08-12 03:07:25 · 1137 阅读 · 0 评论 -
Bootstrap笔记(二) 认识网格系统
认识网格系统介绍Bootstrap网格系统是透过横向的row(列)和直向的column(行)来设计网页版面,他将网页宽度平均分割为12等份,称为12个column。範例:使用两个div元素制作宽度为1:1的两栏式版面,那么这两个div元素是位于相同的row,并分别占用6个column。使用三个div元素制作宽度为1:3:2的三栏式版面,那么这三个div元素是位于相同的row,并分别占用2、6、4个column。网格选项Bootstrap针对不同的荧幕尺寸提供多种网格选项类别前原创 2021-08-11 18:23:21 · 195 阅读 · 0 评论 -
Bootstrap笔记(一) 网页的基本结构
Bootstrap 网页的基本结构範例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-08-09 23:21:49 · 172 阅读 · 0 评论