bootsrap 样式笔记

颜色

--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

.bg-
div bg-secondary progress-bar-striped  背景 透明 模糊

---

大小

--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;

.lead	使段落突出显示
.small	设定小文本 (设置为父文本的 85% 大小)

.btn-lg	这会让按钮看起来比较大。
.btn-sm	这会让按钮看起来比较小。
.btn-xs	这会让按钮看起来特别小。
.btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

---

定位

.mt-3 	 margin-top: 1rem !important;
.h-100    height: 100% !important;

.text-left	设定文本左对齐
.text-center	设定文本居中对齐
.text-right	设定文本右对齐
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行

class .pull-right 向右对齐
class .pull-left 向左对齐

class .form-inline 内联
	<xx class="xx-inline"><xx/>
		eg: <form class="form-inline">

class .form-horizontal 水平
	向父 <form> 元素添加 class .form-horizontal。
	把标签和控件放在一个带有 class .form-group 的 <div> 中。
	向标签添加 class .control-label。
	eg: <form class="form-horizontal" role="form">
			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">名字</label>
				 <div class="col-sm-10">
 					 <input type="text" class="form-control" id="firstname" placeholder="请输入名字">

---

js类

.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写

.initialism	显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.blockquote-reverse	设定引用右对齐

.list-unstyled	移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行

.dl-horizontal	该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例
.pre-scrollable	使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

.show	强制元素显示
.hidden	强制元素隐藏
.text-hide	将页面元素所包含的文本内容替换为背景图
.close	显示关闭按钮
.caret	显示下拉式功能

html样式

.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.active	按钮被点击
.disabled	禁用按钮

group

**-group
	<**>
	<**>
	xx class="**-group-xx"

如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置：