今日的内容：

最近几天完成了任务8 任务9

通过任务练习了boostrap和响应式布局

明日计划：

完成任务8，9的验收

继续学习剩余boostrap内容

任务收获：

每天学习boostrap的组件并且做了总结

Media object

基于flexbox的重复性强的图文组合布局,图片和文字左右分开布局

1.       整体布局div.media

a)       图片内容Img.mr-n

b)       文字内容div.meida-body

                    i.            Hn.mt-n标题

                   ii.            Text

                  iii.            Media

                  iv.            Other

2.       Alignment

a)       Img.align-self-start/center/end

3.       Order

a)       文字和图片可改变顺序

4.       Media list

a)       Ul>li.media>img+media-body>other

Breadcrumb

i.            Nav

a)       ol.breadcrumb

                    i.            li.breadcrumb-item

1.       a

                   ii.            li.breadcrumb-item active (current one)

b)       4.0改变分隔符的方法

                    i.            Breadcrumb-item::before{content”change”}

c)       Aria声明标签意义

                    i.            Nav aria-label=breadcrumb

                   ii.            Last li aria-current=page

Nav

i.            Ul.nav

a)       Li.nav-item

                    i.            A.nav-link  active/disable

ii.            Nav,使用flex布局，所以不一定要使用ul>li 父级元素使用很灵活,只要父元素nav子元素nav-link就好

a)       Nav.nav

                    i.            A.nav-link

iii.            Flex

a)       Alignment

                    i.            使用flex对齐方法控制nav对齐

                   ii.            水平justify-content-

                  iii.            垂直align-items

b)       Flex-column

                    i.            垂直方向nav

iv.            不同的样式

a)       给.nav后加入样式class

b)       TAB Nav-tabs

c)       Pill Nav-tabs

d)       Nav-fill占据整行，根据内容宽度排列

                    i.            非ul>li的导航条，在a上必须设置nav-item才能使nav-fill生效

e)       Nav-justified 占据整行等宽

                    i.            非ul>li的导航条，在a上必须设置nav-item才能使nav-fill生效

v.            Flex-size-value 设置不同屏幕的样式

a)       Flex-sm-fill/flex-md-justified

b)       Flex-column/flex-md-row

Carousel

i.            Div..carousel slide

a)       Id=carouselExampleSlideOnly

                    i.            Div.carousel-inner

1.       Div.carousel-item active>Img.d-block w-100

2.       Div.carousel-item>Img.d-block w-100

b)       Id=carouselExampleControls; data-ride=carousel

                    i.            Div.carousel-inner

1.       Div.carousel-item active>Img.d-block w-100

2.       Div.carousel-item>Img.d-block w-100

3.       A.carousel-control-prev href=#carouselExampleControls role=button data-slide=prev

a)       Span.carousel-control-prev-icon

b)       Span.sr-only 

4.       A.carousel-control-next href=#carouselExampleControls role=button data-slide=next

a)       Span.carousel-control-next-icon

b)       Span.sr-only 

c)       Id=carouselExampleIndicators data-ride=carousel

                    i.            Ol.carousel-indicators

1.       li.active data-target=#carouselExampleIndicators data-slide-to=0

2.       li. data-target=#carouselExampleIndicators data-slide-to=1

                   ii.            Div.carousel-inner

1.       Div.carousel-item active>Img.d-block w-100

2.       Div.carousel-item>Img.d-block w-100

d)       Div.carousel-itemCaption

                    i.            Div.carousel-inner

1.       Div.carousel-item active

a)       Img.d-block w-100

b)       Div.carousel-caption d-none d-md-block

                                                      i.            H5

                                                     ii.            P

ii.            Carousel细节

a)       Div.carousel 相对定位作为ol.indicators和a.carousel-control的位置参照

b)       Ol.indicators 是flex，绝对定位在正中下方10px距离两边margin15%

                    i.            List被justify-conten-center居中，有间距

                   ii.            想改变样式要改变list内容

c)       A.carousel-control 超链接绝对定位在父元素左右两边，top=bottom=0垂直居中 flex布局子元素，宽度15%，opacity=0.5

                    i.            Span，flex布局，父元素设置align-item-center，justify-content-center，背景图片为三角，宽高20px

                   ii.            想改变样式要改变span中的背景图片和大小

d)       Div.Carousel-item 宽度100% display：block 绝对定位作为图片的参照物

                    i.            Img w-100默认，d-block默认 ， flex布局align-items-center

                   ii.            可改变大小，但需用绝对定位布局，

                  iii.            相关的a和ol也需改变位置

e)       Indicator和a是根据最外层div.carousel不定宽绝对定位的，所以他们俩相对图片默认位置不变

f)        Inner宽度100%撑起carousel宽度和高度，所以img宽度小于100%时需要改变其他元素布局

g)       Carousel-item不一定是图片还可以是card

h)       Caption可以做成悬浮在图片上的文字

Card

1.       没有default margin 容易与其他component排列

2.       Flex布局 可以很容易居中对齐

3.       不定宽，很容易控制宽度大小

4.       基本组成

a)       Div.card>img.card-img-top + div.card-body

                    i.            Div.card-body>h5.card-title + p.card-text + a.card-link

                   ii.            Card-Body的内容可以有很多类型元素 list a

5.       其他组成

a)       可以用list代替或补充card.body

                    i.            Ul.list-group list-group-flush>li.list-group-item

b)       可以加入header和footer

                    i.            Div.card-header/div.card-footer

                   ii.            H5.card-header

c)       加入blockquote

d)       加入nav

6.       Sizing

a)       默认100%父元素width，所以需要自行设置宽度

                    i.            Col/width相对/绝对宽度/sizing-utilities

7.       Alignment text-alignment

8.       Img

a)       Img位置-top/bottom

b)       文字覆盖在图片上

                    i.            Img.card-img + div.card-img-overlay

9.       Card-group 基于flex布局多个card

a)       Card-group的各个元素会对齐

10.    Card-deck 有间隔的card-group

11.    Card-column 垂直排列cards

Button

1.       Button可用button或者a/input（submit，button，reset）标签，a标签必须有role=button声明语义

2.       Button用.btn声明，.btn-/btn-outline声明样式，btn-有背景色，btn-outline-hover时有背景色

3.       .btn将元素定义行内块级元素，button默认为内容宽高，但可以定义元素宽高

a)       可用数值定义

b)       可用bs4自带btn-lg/btn-small

c)       .btn-block声明button元素占满整行

4.       不同状态不同样式

a)       .active声明button被点击状态，并设置aria-pressed=true

b)       Disable属性声明button不可用状态，a标签需要声明class .disabled 设置aira-disable=true

5.       Toggle

a)       Data.toggle=button和aria-pressed=true/false和active class和autocomplete=off/on 组成button控件操作botton

6.       Checkbox and radio

a)       Button样式的checkbox和radio

b)       Div.btn/btn-group btn-group-toggle data-toggle=buttons

                    i.            Label.btn btn- (active) *n

1.       Input type=checkbox/radio name id autocomplete=off (checked)      

c)       Label标签给选项添加文字 autocomplete是自动完成表单功能

Button group

1.       Button group即多个同级别.btn标签内嵌在.btn-group role=x标签内的组合

2.       Role标签决定了button-group的语义并且声明不同aira-label

3.       Role一般有group/toolbar两种

a)       Toolbar是多个group的合集，作为多个button-group的父元素

4.       Div.btn-toolbar role=toolbar aria-label=toolbar with button

a)       Div.btn-group role=group aria-label=first group

                    i.            Button type=button btn-

                   ii.            Button type=button btn-

b)       Div.btn-group role=group aira-label=second group

                    i.            Button type=button btn-

                   ii.            Button type=button btn-

c)       Toolbar是flex布局

5.       Btn-group可以用-lg/-small控制大小，也可以CSS自定以宽高

6.       Input-group可以作为button-group同级元素内嵌在toolbar中

7.       Dropdown组件可以作为button group中的子元素

a)       Dropdown组件本身就是一个button-group

8.       .btn-group-vertical 垂直的button group

a)       垂直的button-group的dropdown会覆盖下面的元素

b)       所以需要用别的组件

Collapse

1.       Collapse就是一个button元素（a/button标签）加上一个隐藏的collapse元素，用button控制内容元素的显示

2.       格式

a)       A role=button hrep=#collapseExample(collapse’s ID)

b)       button type=button data-target=#collapseExample(collapse’s ID)

                    i.            Class=btn btn-/btn-outline

                   ii.            data-toggle=collapse

                  iii.            aria-expanded=false

                  iv.            aira-control=collapseExample

c)       div.collapse id=collapseExample

                    i.            div.card card-body(content)

3.       aria-expanded是控制的核心  如何不是button标签 必须role=button

4.       data-target给button指定控制的元素ID

5.       collapse的内容要在页面中排版，并且不会覆盖其他元素，display：none和block切换

6.       多个按钮和collapse内容通过ID对应

7.       Accordion

a)       整体div#accordion

b)       Button在card-header里

                    i.            Card-header id=heading

c)       内容在card-body，card-body在collapse里

                    i.            Div.collapse show

                   ii.            data-parent=#accordion

                  iii.            aria-labelledby=#header id

d)       多个card垂直排列

e)       像手风琴一样

f)        默认展开的collapse元素 给collapse 设置css show

Dropdown

1.       Dropdown是按钮（a或button）和内容（a或button或list）组合，内容必须定义为position：relative

2.       框架

a)       最外层div.dropdown 设置position：relative

                    i.            Btn-group 同行多个dropdown

                   ii.            Drop方向: dropup dropright dropleft

b)       Button按钮

                    i.            Button.btn btn- dropdown-toggle type=button id=xxx data-toggle=dropdown aria-expanded=false aria-haspopup

                   ii.            A.btn btn-dropdown-toggle role=button id=xxx data-toggle=dropdown aria-expanded aria-haspopup

c)       Dropdown内容

                    i.            Div.dropdown-menu aria-labelledby=buttonID

                   ii.            Dropdown-menu-left/right-center

1.       a/button .dropdown-item

a)       .active

b)       .disabled

2.       h6. Dropdown-header 下拉菜单标题

3.       div. dropdown-divider 下拉菜单分割线

3.       button按钮与下拉菜单按钮分离

a)       button/a 按钮名称

b)       button/a 添加class data-toggle-split

4.       dropdown内容基本是button组成，细节设置和button设置相似

5.       dropdown的样式可以单独设置，dropdown位置是不需要担心按钮设置的变化的

Nav-bar

1.       nav-bar是button/collapse/dropdowns/forms的组合组件

a)       nav.navbar nav-expand-size

                    i.            a.navbar>img+content

                   ii.            form.form-inline>input/button/div.input-group

                  iii.            span.navbar-text

                  iv.            a/button.navbar-collapse collapse

1.       ul.navbar-nav>li.nav-item>a.nav-link

a)       li.nav-item dropdown

                                                      i.            a.nav-link dropdown-toggle

                                                     ii.            div.dropdown-menu>a.dropdown-item/form

b)       li.nav-item form

2.       div.navbar-nav>a.nav-item nav-link

2.       最外层nav标签，也可用div但要声明 role=navigation

a)       nav的class=navbar nav-expand-size navbar-color bg-color

b)       navbar默认占满整行，可以通过给其外层或内容增加container调整视觉布局

c)       nav是flex布局，可以使用flex布局调整navbar的样式布局

d)       nav可以设置position fixed/sticky-top/bottom设置位置

e)       navbar-dark/light声明了按钮的颜色

3.       a.nav-brand navbar 可以看作navbar的标题

a)       用a标签是因为很多时候标题是公司的名称或logo，可能会用于跳转

b)       Brand的内容可以是文字和图片的组合

c)       Navbar-brand可以放入collapse里作为下拉菜单的标题

d)       Navbar-brand 可以和按钮button布局或交换位置

e)       Button.navbar-toggler type=button datatoggle=collapse data-target=#collapseID aria-control=collapseID aria-expanded=false aria-label=taggle collapse

                    i.            Navbar-toggler是控制collapse的按钮，navbar的主题内容是collapse的内容

                   ii.            按钮的样式span.navbar-toggler-icon

                  iii.            最重要的data-toggle=collapse data-target=#ID

f)        Div.collapse navbar-collapse id=collapseID 是下来菜单的盒子

g)       Navbar的主题是一个nav，注意区别是class=navbar-nav 同样可以两种方法

                    i.            Ul.navbar-nav>li.nav-item (active)>a.nav-link

                   ii.            Div.navbar-nav>a.nav-item nav-link (active disabled)

h)       Dropdow可以作为nav-item

                    i.            Li.nav-item dropdown

1.       A.nav-link dropdown-toggle id=menu_drop data-toggle=dropdown aria-haspopup=true aria-expanded=false

2.       Div.dropdown-menu aria-labelledby=menu_drop(dropdownID)

a)       A.dropdown-item

i)         forms可以作为nav-item也可以作为nav-bar元素

                    i.            form.form-inline  

1.       input.form-control

2.       button

                   ii.            form.form-inline

1.       div.input-group

a)       div.input-group-prepend

                                                      i.            span.input-group-text id=xxx

b)       input.form-control aria-label= aria-describedby=xxx

j)         text也可以是navbar的元素

 任务的问题

1.开始时太依赖boostrap 导致自适应做不下去，后来多用了media解决了些问题

2.字体大小随屏幕的变

3.两端对齐

4.背景图片，雪碧图的自适应