关于前端Bootstrap基础学习总结

最新推荐文章于 2021-05-18 08:18:01 发布

凰轮

最新推荐文章于 2021-05-18 08:18:01 发布

阅读量267

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_41683949/article/details/102722915

版权

Bootstrap基础知识总结

本人前端菜鸟一枚，这是之前学习bootstrap时候作的笔记，也是我的第一篇博文。以后我还会坚持不定时地发自己的学习笔记，希望能和各位大神一起学习。刚好今天是10月24号程序员日，所以以此纪念一下。

1、页面主体：<body> font-size 14px，line-height 1.428px。 <p>margin=1/2行高。
2、中心内容：.lead 让段落突出显示。
3、内联文本：<del> 被删除的文本； <s> 无用的文本； <ins> 额外插入的文本； <u> 为文本带下划线。
<small> 小号文本，为父容器字体的85% ；<strong> 通过font-weight强调一段文本； <em> 斜体强调文本。
<b> 高亮单词； <i> 发言，技术词汇等。
4、文本对齐：.text-left左边对齐； .text-center中间对齐； .text-right右边对齐；
.text-justify规定如何对齐行文本进行对齐和分隔； .text-nowrap 没有文字换行。
5、改变大小写：.text-lowercase小写； .text-uppercase大写； .text-capitaline首字母大写。
6、缩略语：<abbr>当鼠标悬停在缩写和缩写词上时就会显示完整内容；
initialism首字母缩略语，可以让 font-size 变得稍微小些。
7、地址： <address>让联系信息以最接近日常使用的格式呈现。
8、引用: <blockquote>默认样式的引用,建议用 <p>标签。
<blockqoute>多种引用样式，添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
.blockquote-reverse 类可以让引用呈现内容右对齐的效果。

     <blockquote class="blockquote-reverse"> 
     
     </blockquote>

9、列表：list-unstyled 无样式列表。
10、内联列表：list-inline 添加少量的内补（padding），将所有元素放置于同一行。
11、描述：dl-horizontal 水平排列的描述，让 <dl> 内的短语及其描述排在一行。
.text-overflow水平排列的描述列表将会截断左侧太长的短语。
12、代码： <code>内联代码。
在这里插入图片描述
13、用户输入：<kbd> 标签标记用户通过键盘输入的内容。

14、代码块：<pre> 多行代码标签。
注：<p>记得尖括号要用转义字符。
.pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
15、变量：<var> 标记变量。

<var>y</var> =<var>m</var><var>x</var> + <var>b</var>
 /*在页面上显示 y = mx + b*/

16、程序输出：<samp> 标记程序输出的内容。
17、表格：
（1）、基本实例：.table少量的padding和水平方向的分隔线。
（2）、条纹状表格：.table-striped可以给内的每一行增加斑马条纹样式。
（3）、带边框的表格：.table-bordered为表格中的每个单元添加边框。
（4）、鼠标悬停：.table-hover让的每一行对鼠标悬停做出响应。
（5）、紧缩表格：.table-condensed让单元格的padding减少一半。
（6）、状态类：
.active鼠标在单元格上设置颜色。
.success标记成功动作的颜色。
.info标记提醒信息的颜色。
.warning标记警告的颜色。
.danger标记危险的颜色。
（7）、响应式表格：.table-responsive创建响应式表格。
.overflow-y：hidden 垂直方向内容截断
18、表单
（1）、基本实例：.form-control 被设置的、和默认的宽度width：100%，这些控件和label被包裹在.form-group中。
注：建议将输入组嵌套到表格组中使用。
（2）、内联表单：.form-inline类可使内容左对齐并且表现为inline-block属性
注：如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，可以通过为 label 设置 .sr-only 类将其隐藏。
（3）、水平排列的表单：form-horizontal联合栅格类可以将label和控件组成水平并排的布局。
（4）、被支持的输入控件类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
19、文本域：.rows多行文本表单控件。
20、多选框和单选框：.checkbox多选框； .radio单选框；
.checkbox-inline内联多选； .radio-inline内联单选。
21、下拉列表：<select> .multiple 默认显示多选项。
22、静态控件：.form-control-static将一行纯文本与label元素放置于同一行。
23、焦点状态：:focus将默认的outline演示移除，赋予了box-shadow属性。
24、禁用状态：disabled禁止与用户有任何交互。
被禁用的<fieldset>设置disabled，可以禁用它所包含的所有控件。
25、只读状态：readonly禁止用户修改输入框的内容，保留鼠标的状态。
26、校验状态：（1）、添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
（2）、添加额外的图标：.has-feedback针对校验状态为输入框添加额外的图标。
27、控制尺寸：.input-lg、.input-sm可以为控件设置高度。
28、水平排列的表单组的尺寸：.form-group-lg、.form-group-sm为表单控件设置尺寸
29、按钮：（1）、可作为按钮使用的标签和元素：<a>、<button>、<input>
注：如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=“button” 属性。
（2）、预定义样式：.btn-default默认样式 .btn-primary首选项
.btn-success成功 .btn-info一般信息
.btn-warning警告 .btn btn-danger危险
.btn-link链接
（3）、尺寸：.btn-lg、.btn-sm、.btn-xs可以得到不同尺寸的按钮。
.btn-block宽度为父元素的100%，为块级元素。
（4）、激活状态：.active处于激活状态。
（5）、禁用状态：.opacity呈现无法点击的效果。
30、图片：（1）、响应式图片：.img-responsive让图片支持响应式布局。
（max-width:100%、height:auto、display:block）
（2）、图片形状：.img-rounded添加圆角 .img-circle变为圆形 . img-thumbnail缩略图
31、辅助类：（1）、情境文本颜色.text-muted .text-primary . text-success
. text-info . text-warning . text-danger
（2）、情境背景色：. bg-primary . bg-success . bg-info
. bg-warning . bg-danger
32、关闭按钮：.close 关闭的图标（x），可以让模拟框和警告框消失
33、三角符号：. caret 三角符号可以指示某个元素具有下拉菜单的功能
34、快速浮动：. pull-left快速向左浮动 . pull-right快速向右浮动
35、内容块居中：.center-block内容居中
36、清除浮动：. clearfix父元素添加此类可以很容易地清除浮动
37、显示或隐藏内容：.show强制任意元素显示 .hidden强制任意元素隐藏
38、屏幕阅读器和键盘导航：.sr-only对屏幕阅读器以外的设备隐藏内容，和.sr-only-focusable联合使用可以在元素有焦点的时候显示出来
39、图片替换：.text-hide将元素的文本替换成背景图
40、响应式工具：（1）、可用的类

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面 (≥992px)	大屏幕桌面 (≥1200px)
.visible-xs-*	可见	隐藏	隐藏	隐藏
.visible-sm-*	隐藏	可见	隐藏	隐藏
.visible-md-*	隐藏	隐藏	可见	隐藏
.visible-lg-*	隐藏	隐藏	隐藏	可见
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏