10.29 冯娜-1

学习日志

一、输入组

1、.input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。

2、.input-group-prepend 类可以在输入框的的前面添加文本信息。

3、 .input-group-append 类添加在输入框的后面。

4、 .input-group-text 类来设置文本的样式。

5、label标签点击自动聚焦。

6、正常情况下，form表单的input组件都有对应的label.当input组件获取到焦点时，屏幕阅读器会读出相应的label里的文本。

aria-label="Amount (to the nearest dollar)???

7、aria-label="With textarea？？？

8、flex-nowrap：输入组中的自定义表单字段验证。

9、输入框大小：input-group-sm（小）、 input-group（正常）、input-group-lg（大）

10、可以添加复选框和单选框：在input-group中添加input标签type=checkbox。（复选框）；在input-group中添加input标签type=radio。（单选框）。

11、可以有多个输入框：在input-group中添加input标签type=text（可写多个），在同一行显示。

12、多个加载项：input实现。

13、加按钮： aria-label="Recipient's username"

​ aria-describedby="button-addon2"？？？

14、带有下拉菜单的输入框:aria-haspopup="true" aria-expanded="false"???

15、分段按钮输入：aria-label="Text input with segmented dropdown button"？？？

16、自定义输入框：class="input-group-text" for="inputGroupSelect01"？？？

二、巨幕

1、巨幕具有背景色。

2、可用于巨型广告。

3、jumbotron 。

4、修改后的大屏幕：jumbotron-fluid。

三、列表组

1、ul中添加list-group，li中添加list-group-item

2、添加.active到.list-group-item以指示当前的活动选择。

3、添加.disabled到.list-group-item以使其显示为已禁用。

4、list-group-item-action鼠标悬停显示灰色背景。

5、按钮也可使用：在div中添加list-group，在button中添加list-group-item。

6、list-group-flush 去除边框圆角、边框。

7、 横向显示列表：list-group-horizontal 。

8、横向有四种屏幕：sm、md、lg、xl。

9、list-group-item-primary实现隔行换色，添加在li元素中。

10、鼠标悬停有变化：list-group-item-（secondary）8种。

11、带徽章：d-flex 与数据有距离 justify-content-between 与数据无距离； 在尾部显示 align-items-center徽章的样式。

12、自定义内容：可以用于新闻 。text-muted字体样式。

          
                             List group item heading

                3 days ago