松桃县住房和城乡建设局网站,免费考研论坛,无锡网站建设公司哪家好,wordpress 文章页名称文章目录前言一、Bootstrap是什么#xff1f;二、Bootstrap安装方式一#xff1a;将压缩包下载到本地引入使用方式二#xff1a;使用Bootstrap官方cdn二.Bootstrap容器下面是屏幕宽度在不同大小时不同容器的显示状态三.Bootstrap栅格系统bootstrap网格系统有以下六个类网格系…
文章目录前言一、Bootstrap是什么二、Bootstrap安装方式一将压缩包下载到本地引入使用方式二使用Bootstrap官方cdn二.Bootstrap容器下面是屏幕宽度在不同大小时不同容器的显示状态三.Bootstrap栅格系统bootstrap网格系统有以下六个类网格系统规则示例第一行等分为12份示例第二行等分为3份示例第三行 不等分左边占用三分之一右边占用三分之二示例网格嵌套列示例网格偏移列示例网格列顺序 网格排版规则Bootstrap文本文本对齐方式文本转换长文本截断文本换行和溢出文本大小文本粗细及斜体文本行高重置链接文本颜色Bootstrap颜色类文本颜色类背景颜色类Bootstrap列表列表类型列表组总结前言 随着Bootstrap的问世Web开发者不必再花费时间、费力地编码只需找到合适的代码插入到合适位置即可。此外CSS利用LESS编写很多样式和设计都已设计完成。 一、Bootstrap是什么 Bootstrap是一个用于快速开发Web应用以及网站的前端框架Bootstrap是前端开发中比较受欢迎的框架简洁且灵活它基于htmlcssjshtml用于定义页面元素css定义页面布局而js用于控制页面元素的响应Bootsrap将htmlcss和js封装成一个个功能组件用起来简洁灵活使得Web开发更便捷 二、Bootstrap安装
方式一将压缩包下载到本地引入使用 搜索进入Bootstrap中文网并点击等待下载安装 下载并解压之后把文件名更改为Bootstrap5并将它拖入你的网站根目录下面分别是css以及js文件的文件内容 将css与js分别引入css使用link引入js在body标签结尾之前使用script引入 !DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relstylesheet href/bootstrap-5/css/bootstrap.min.csslink relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbodydiv idapp/div!-- built files will be auto injected --script src/bootstrap-5/js/bootstrap.min.js/script/body
/html
方式二使用Bootstrap官方cdn 直接复制粘贴到对应位置就可以啦注意要将integrity属性和crossorigin属性删掉不然会提示错误信息 !DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0-alpha1/dist/css/bootstrap.min.css relstylesheet /link relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbodydiv idapp/div!-- built files will be auto injected --script srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.0-alpha1/dist/js/bootstrap.bundle.min.js /script/body
/html
二.Bootstrap容器 从超小到小屏幕然后中等–大屏幕–特大屏幕–超级大屏幕这几个阶段显示的宽度状态也截然不同 .container用于创建固定宽度的响应式页面 .container-luid类用于创建一个全屏幕尺寸的容器容器始终跨越整个屏幕宽度100% 区别 相同点就是俩者都可以将高度设置为auto 不同点就是containe根据屏幕利用媒体查询设置了固定的宽度它是阶段性的改变宽度而container-fluid则是将宽度设定为auto所以当浏览器缩放时它始终保持100%大小 下面是屏幕宽度在不同大小时不同容器的显示状态
宽度大于1400显示如下1920 宽度大于12001400显示如下1360 宽度大于9921200显示如下1080 宽度大于768992显示如下820 宽度大于576768显示如下640 宽度小于576显示如下375 三.Bootstrap栅格系统 bootatrap提供了一套响应式移动设备优先的流式网格系统随着屏幕或者视口尺寸的增加系统会自动分为最多12列多出12列的将不再此行显示换行显示 bootstrap网格系统有以下六个类
重点
.col 针对所有设备.col-sm 平板-屏幕宽度等于或大于576px.col-md 桌面显示器-屏幕宽度等于或者大于768px.col-lg 大桌面显示器-屏幕宽度等于或大于992px.col-xl 特大桌面显示器-屏幕宽度等于或大于1200px.col-xxl 超级大桌面显示器-屏幕宽度等于或大于1400px
网格系统规则
使用行来创建水平的列组网格每一行需要方式在设置了.container或者其他类的容器中这样就可以自动设置一些外边距与内边距内容需要放置在列中并且只有列可以是行的直接子节点预定义的类如.row和.col-sm-4可以用于快速制作网格布局
示例第一行等分为12份 container和row共同组成栅格容器row代表的是一行 创建栅格容器后设置名为.col-sm的div当尾数为1时则表示每个div宽度占1/12 div classcontainer div classrowh1第一行/h1!-- 最多可以分成12个网格下面是每一个网格占用1个比例 --div classcol-sm-11/divdiv classcol-sm-12/divdiv classcol-sm-13/divdiv classcol-sm-14/divdiv classcol-sm-15/divdiv classcol-sm-16/divdiv classcol-sm-17/divdiv classcol-sm-18/divdiv classcol-sm-19/divdiv classcol-sm-110/divdiv classcol-sm-111/divdiv classcol-sm-112/div/div/div屏幕宽度大于576px显示如下
宽度小于576px则是这样显示 示例第二行等分为3份 div classcontainer div classrowh1第一行/h1!-- 最多可以分成12个网格下面是每一个网格占用1个比例 --div classcol-sm-11/divdiv classcol-sm-12/divdiv classcol-sm-13/divdiv classcol-sm-14/divdiv classcol-sm-15/divdiv classcol-sm-16/divdiv classcol-sm-17/divdiv classcol-sm-18/divdiv classcol-sm-19/divdiv classcol-sm-110/divdiv classcol-sm-111/divdiv classcol-sm-112/div/divdiv classrowh1第二行/h1!-- 最多可以分成12个网格下面是每一个网格占用1个比例 --div classcol-sm-41/divdiv classcol-sm-42/divdiv classcol-sm-43/div/div/div示例第三行 不等分左边占用三分之一右边占用三分之二 div classcontainer div classrowh1第一行/h1!-- 最多可以分成12个网格下面是每一个网格占用1个比例 --div classcol-sm-11/divdiv classcol-sm-12/divdiv classcol-sm-13/divdiv classcol-sm-14/divdiv classcol-sm-15/divdiv classcol-sm-16/divdiv classcol-sm-17/divdiv classcol-sm-18/divdiv classcol-sm-19/divdiv classcol-sm-110/divdiv classcol-sm-111/divdiv classcol-sm-112/div/divdiv classrowh1第二行/h1!-- 最多可以分成12个网格下面是每一个网格占用1个比例 --div classcol-sm-41/divdiv classcol-sm-42/divdiv classcol-sm-43/div /divdiv classrowh1第三行/h1!-- 最多可以分成12个网格下面是每一个网格占用1个比例 --div classcol-sm-41/divdiv classcol-sm-82/div /div/div示例网格嵌套列 下面代码将布局分为了俩列左侧一列占7份右侧占5份其中每列内部还设置有俩行总和并超过了外面设置的7份或者5份这么设置会不会正常显示呢我们接着往下看 div classrowh1第四行/h1div classcol-sm-7 stylebackground: red;div classrowdiv classcol-sm-6col-sm-6/divdiv classcol-sm-6col-sm-6/div/divdiv classrowdiv classcol-sm-4col-sm-1/divdiv classcol-sm-6col-sm-9/div/div/divdiv classcol-sm-5 stylebackground: blue;div classrow div classcol-sm-6col-sm-6/divdiv classcol-sm-6col-sm-6/div/divdiv classrowdiv classcol-sm-4col-sm-1/divdiv classcol-sm-6col-sm-9/div/div/div/div/div可以正常显示说明每一列中的每一行占用的空间是将父级列所占用的空间又等分成了12份并不是说父级列设置了7或者5里面行的总和就得小于这个数 示例网格偏移列 网格列偏移是通过类名offset- * - * 来设置的 第一个*号是表示屏幕设备类型例如smmdlg等等 第二个*号是表示偏移度可以设置1-11的数字 例子offset-md-4是往右边移动了4格 div classrowh1第五行/h1div classcol-sm-4 stylebackground: red;1/divdiv classcol-sm-4 offset-sm-4 stylebackground: blue; 2/div
/div俩列共占用8格还剩余四格所以想要蓝色格子到最右边则给右边格子设置4偏移量offset-sm-4 示例网格列顺序 网格列顺序是通过类order来控制内容的可视顺序order-sm-1 div classrowh1没有加order/h1div classcol-sm-4 stylebackground: red;1/divdiv classcol-sm-4 stylebackground: blue; 2/divdiv classcol-sm-4 stylebackground: green; 3/div/divdiv classrowh1加了order/h1div classcol-sm-4 order-sm-2 stylebackground: red;1/divdiv classcol-sm-4 order-sm-3 stylebackground: blue; 2/divdiv classcol-sm-4 order-sm-1 stylebackground: green; 3/div/div网格排版规则 排列数字1-5会起作用5之后的数字不起作用 用数字设置顺序导致的问题比如有八个div如果只是给前三个设置order后面没有设置顺序则后面的div就会排到前面去然后紧接着是加了顺序的123div order-first和order-last顺序设置时候不会出现上面那种问题设置第一个就是第一个设置最后就是最后且优先级比设置数字要高 Bootstrap文本
文本对齐方式
基本对齐方式如下
.text-start 文本居左.text-center 文本居中.text-end 文本靠右 除了上面基本的对齐方式还可以配置屏幕宽度大小来实现响应式文本对齐类 响应式对齐方式如下
text-sm-center 当屏幕宽度大于等于576px时候保持居中text-md-start 当屏幕宽度大于等于768px时候保持居左text-lg-end 当屏幕宽度大于等于992px时候保持居右……
div classcontainerp classtext-center这是一个居中的段落/pp classtext-start这是一个靠左的段落/pp classtext-end这是一个靠右的段落/p!-- 当屏幕宽度大于等于576px时这个文本一直保持居中 --p classtext-sm-center这是一个居中的段落/p
/div文本转换 可以将字母转换为小写大写设置单词首字母大写等 text-lowercase 字母转小写text-uppercase 字母转大写text-capitalize 单词首字母大写
代码示例及显示结果 div classcontainer!-- 转换结果aaaa --p classtext-lowercaseAAAAA/p !-- 转换结果AAAA -- p classtext-uppercaseaaaa/p!-- 转换结果Shop --p classtext-capitalizeshop/p/div长文本截断 对于比较长的文本可以使用.text-truncate用省略号截断文本 代码示例及显示结果 div classcontainerdiv classcol-sm-1 text-truncate我是一个很长很长的段落/div!-- 页面显示我是...... --/div文本换行和溢出
.text-wrap 实现文本在超过盒子宽度时候自动换行.text-nowrap 阻止文本换行并使文字溢出当前盒子
代码示例及显示结果
div classcontainerdiv classcol-sm-1 text-wrap我是一个很长很长的段落/div!-- 我是一 --!-- 个很长 --!-- 很长的 --!-- 段落 --div classcol-sm-1 text-nowrap我是一个很长很长的段落/div!--我是一个很长很长的段落 --/div文本大小 在bootstrap中默认字体大小为16px 在bottstrap中分别将文本大小分为六类分别对应h1-h6 div classcontainer!-- 添加类名.fs-*或者h**代表1-6 --h1使用fs-*类名的文本/h1p classfs-11/pp classfs-22/pp classfs-33/pp classfs-44/pp classfs-55/pp classfs-66/ph1使用h*类名的文本/h1p classh11/pp classh22/pp classh33/pp classh44/pp classh55/pp classh66/p/div文本粗细及斜体 在BootStrap5中将字体的粗细分为了5类 .fw-bolder(bolder).fw-bold(700).fw-normal(400).fw-light(300).fw-lighter(lighter) div classcontainer mt-3p classfw-bold粗体文本/pp classfw-bolder粗体文本(相对于父元素)/pp classfw-normal正常的文本/pp classfw-light细体文本./pp classfw-lighter细体文本(相对于父元素)/pp classfst-italic斜体/pp classfst-normal正常字体样式的文本 取消斜体p
/div文本行高 在BootStrap5中将行高分为了4种 .lh-1(1rem).lh-sm(1.25rem).lh-base(1.5rem).lh-lg(2rem) div classcontainerdiv classcontainer mt-3p classlh-1这是一个很长的段落用来说明我们的实用程序如何影响元素的行高。类应用于元素本身有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。/pp classlh-sm这是一个很长的段落用来说明我们的实用程序如何影响元素的行高。类应用于元素本身有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。/pp classlh-base这是一个很长的段落用来说明我们的实用程序如何影响元素的行高。类应用于元素本身有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。/pp classlh-lg这是一个很长的段落用来说明我们的实用程序如何影响元素的行高。类应用于元素本身有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。/p/div/div重置链接文本颜色 使用类 .text-reset 重置文本或链接的颜色以便它从其父级继承颜色 .text-reset
div classcontainer mt-3p classtext-mutedMuted text with a a href#reset link/a/pp classtext-muted Muted text with a a href# classtext-resetreset link/a/p
/divBootstrap颜色类
文本颜色类
.text-muted 柔和的文本.text-primary 重要的文本.text-success 执行成功的文本.text-info 提示信息的文本.text-warning 警告文本.text-danger 危险操作文本.text-secondary 副标题.text-dark 深灰色文字.text-body 默认颜色 黑色.text-black-50 透明度为50的黑色文本.text-light 浅灰色文本.text-white 白色文本.text-white-50 透明度50的白色文本
div classcontainer mt-3p classtext-muted 柔和的文本 /pp classtext-primary 重要的文本 蓝色 /pp classtext-success 执行成功的文本/pp classtext-info 代表一些提示信息的文本 /pp classtext-warning 警告文本 /pp classtext-danger 危险操作文本 /pp classtext-secondary 副标题 /pp classtext-dark 深灰色文字 /pp classtext-body 默认颜色 黑色 /pp classtext-black-50 透明度为50的黑色文本 /pp classtext-light 浅灰色文本白色背景下看不清楚 /pp classtext-white 白色文本 /pp classtext-white-50 bg-dark 透明度为50的白色文本 /p
/div背景颜色类 与文本类似只不过前置类名更换为了bg bg-primarybg-successbg-infobg-warningbg-dangerbg-secondarybg-darkbg-light
div classcontainer mt-3p classbg-primary text-white 重要的背景颜色 /pp classbg-success text-white 执行成功的背景/pp classbg-info text-white 提示信息的背景 /pp classbg-warning text-white 警告背景 /pp classbg-danger text-white 危险操作背景 /pp classbg-secondary text-white 副标题背景 /pp classbg-dark text-white 深灰色背景 /pp classbg-light text-dark 浅灰色背景 /p
/divBootstrap列表
列表类型 使用bootstrap创建列表可以创建以下三种不同类型的html列表 无序列表—顺序无关紧要的列表html中是ui li有序列表—顺序比较重要的列表html中是ol li自定义列表—术语列表及相关描述dl dt 使用.list-unstyled来去除列表的默认样式 div classcontainer mt-3h1去除列表小点默认样式/h1ul classlist-unstyledlihtml/lilicss/lilijs/li/ul
/div内联列表 简单来说就是将垂直列表变为水平列表一般用于导航样式 给父级添加list-inline子级添加list-inline-item来实现效果 div classcontainer mt-3ul classlist-unstyled list-inlineli classlist-inline-itemhtml/lili classlist-inline-itemcss/lili classlist-inline-itemjs/li/ul
/div列表组
总结
以上就是今天要讲的内容本文目前简单介绍了Bootstrap的使用后续还会继续更行
