2020-07-02

Bootstrap常用组件

（1）.btn样式类用于将任何一个HTML元素变为按钮的基础样式。按钮尺寸颜色类包括：btn-lg、btn-sm和btn-xs。将元素变为块级按钮，可添加btn-block样式类。
（2）Bootstrap中颜色类名包括：-default——默认基准色白色；-danger——红色；-warning——黄色；-success——绿色；-info——浅蓝色；-primary——深蓝色。Bootstrap中很多颜色都是直接采用了标准颜色类。例如，字体颜色——text-danger、text-success等。
（3）为img元素的class添加响应式图片样式类：img-responsive，可让图片根据浏览设备的宽，响应式调整图片大小。
（4）文本对齐方式包括：text-left——左对齐、text-center——中间对齐、text-right——右对齐、text-justity——两端对齐。
（5）文本内容转大小写：text-uppercase——全部字母转大写、text-lowercase——全部字母转小写、text-capitalize——每个单词首字母大写。
（6）列表样式包括：list-unstyled——去除列表项前的提示符号；list-inline——将每个列表项水平排列。
（7）表格样式包括：table——基础类；table-bordered——表格边框；table-striped——表格隔行变色；table-hover——鼠标悬浮到table的一行上，自动修改该行的颜色；table-responsive——变为响应式表格。
（8）bootstrap.less文件是主Less文件，通过@import引入其他Less文件。如果不需要Bootstrap中的个别功能，从bootstrap.less中删除对应Less文件的引入语句即可。
（9）默认Bootstrap表单结构：表单元素form没有class；表单中的每组输入项（label+input+span）都包含在class为form-group的小容器元素中；表单元素input设置class为“form-control”；标签元素label设置class为control-label。
（10）行内表单，就是表单元素都排列在一横行中。样式类使用结构如下：

<input…class=“form-control”>

（11）水平表单是指表单中同样包含行和列栅格布局效果的表单。

用户名

…

（12）以“data-*”开头的属性，称为自定义扩展属性，用于为组件添加行为。自定义扩展属性负责添加交互行为，也就是让用户可操作组件。
（13）模态框是指在一个父窗口中打开了一个子窗口，若子窗口不关闭，则父窗口无法获得输入焦点，禁止执行任何操作，这个子窗口称为模态对话框。