BootStrap
文章平均质量分 56
关于前端框架技术BootStrap的简单介绍
jwz934738949
这个作者很懒,什么都没留下…
展开
-
bootstrap的flex布局
基本布局添加.d-flex与.d-flex-inline开启flex弹性布局。其中.d-inline-flex代表内联样式的flex布局.flex-row为水平布局,从左到右。.flex-row-reverse代表翻转水平布局,从右向左.flex-column为垂直布局,从上到下。.flex-column-reverse翻转垂直布局,从下到上.justify-content-*实现水平排列子元素,*可以为start(顶端对齐),end(底端对齐),center(居中对齐),between(两端对齐原创 2021-07-04 15:03:01 · 1327 阅读 · 0 评论 -
bootstrap公共样式
浮动相关在按钮标签中添加.close类与内容×来实现关闭按钮的显示为类添加.float-left、.float-right实现元素的左浮动与右浮动,而.float-none会默认不显示浮动效果为了清除浮动,可以在浮动的父元素中添加类.clearfix来实现清除浮动的效果.float-left与.float-right也可以实现响应式布局,只要输入代表屏幕大小的关键字就可以。例如:.float-md-left添加类.text-hide可以隐藏元素内容,但是SEO仍然可以识别到该原创 2021-07-04 15:02:37 · 139 阅读 · 0 评论 -
Bootstrap的颜色与边框
颜色使用.text-实现特定的颜色,其中可以为success,danger,warning,primary,secondary,light,dark,muted,white,black其中white与black还可以设置为text-white-50,text-black-50,分别表示颜色的一半使用.text-*也可以实现超链接的点击与悬停,但是white与muted不支持.bg-可以实现背景颜色的设置,其中与文本颜色一致,多一个transparent,用来设置背景色为透明边框使用.bor原创 2021-07-04 15:00:00 · 2757 阅读 · 0 评论 -
Bootstrap表格样式
为table元素添加.table类,可以实现Bootstrap中的表格样式显示添加.table-dark后会将表格的主题变为暗黑色添加.table-striped可以实现表格的条纹状显示,也可以在暗黑色中显示在<thead>上添加.thead-light或者.thead-dark可以将表头设置为明亮或者暗黑默认下,表格的边框显示不完全,使用.table-bordered设置完全边框,包括行边框与列边框使用.table-borderless去掉表格中的所有边框.table-hover.原创 2021-07-03 09:15:47 · 593 阅读 · 0 评论 -
Bootstrap代码与图文
代码样式使用<code>元素,将代码放入其中,会默认将其中的文本识别文代码但是无法识别其中的特殊符号与空格、回车等字符,在<code>外层添加<pre>就可以实现识别特殊字符在代码区域添加.pre-scrollable,可以实现默认区域滚动,默认高度为350px使用<var>标签识别变量使用<kbd>识别键盘输入使用<samp>识别实例<pre class="pre-scrollable" style="widt原创 2021-07-03 09:15:08 · 515 阅读 · 0 评论 -
Bootstrap内容排版
标题类在Bootstrap中使用标题标签<h1>~<h6>语义不变,仍然是代表不同的标题,但是标题的样式发生了变化当不使用h1~h6的标签,而是一般的标签时,添加.h1~.h6的类名,也可以实现相同的功能添加.text-muted类名,使得当前元素变为副标题使用.display-1~4,可以添加4中不同的大标题,比一般的h1~h6更大,代表着更大标题<h1>标题名称</h1><h2>标题名称</h2><h3>原创 2021-07-03 09:13:30 · 206 阅读 · 0 评论 -
Bootstrap对齐与排列
对齐行对齐添加align-items-start类,实现按照行顶部对齐align-items-center,实现按照行居中对齐align-items-end,按照行底部对齐align-self-start,对每列分别进行对齐,实现按照顶部进行对齐align-self-center,按照行进行居中对齐align-self-end,实现按照行的底部进行对齐align-items一半作用于行,对整个行进行对齐;而align-self时对于每列进行行对齐<div class="c原创 2021-07-03 09:10:48 · 2433 阅读 · 0 评论 -
Bootstrap元素的显示与隐藏
在Bootstrap中,为了更好的适配移动设备,需要对页面中不重要的内容设置元素的显示与隐藏当在大屏幕中,可以将那些并不重要的组件进行显示,而在小屏幕中,为了节省空间,需要对一些元素进行隐藏为元素添加类d-none,将在所有设备中隐藏该元素,d-*-none,将为特定尺寸的屏幕进行隐藏元素。例如:d-sm-none,将在小屏幕中隐藏元素但是需要注意的是,Bootstrap默认移动端优先,也就是会从最小的设备开始适配,然后将所有大于的设备也进行适配当设置了小屏幕隐藏之后,默认小屏幕以及之上的所有屏幕.原创 2021-07-03 09:09:34 · 2516 阅读 · 0 评论 -
Bootstrap栅格布局
栅格布局基本概念在Bootstrap中引入了栅格布局,将页面分成类似于表格一样的布局每一行由12列组成,可以通过设置列所占有的列的个数来设置列的宽度支持响应式布局,分别有5种响应尺寸,分别对应不同的设备宽度使用flexbox流式布局来实现页面布局使用div来实现容器、行、列的布局栅格布局具体操作首先布置一个容器div用来存放栅格,为div添加container类实现容器为子元素添加row类实现行的布局,而列的布局使用col-*来实现当类名为container-fluid的话,默认占据原创 2021-07-03 09:03:40 · 1185 阅读 · 0 评论