一.栅格
2.弹性布局
响应式flex类-row -column
3.表单
form-group 堆叠表单，垂直方向显示
form-inline 内联表单，水平显示，内部可以写col
样式
文本框/密码框基本类 form-control
多选框 form-check 块级，内边距1.25rem
form-check-inline 变成一个弹性容器
form-check-input 往左移动1.25rem
form-check-label 下外边距清0
form-text 块级，上外边距0.25rem
练习：
默认的栅格 水平表单
行 div.row div.form-inline
1.外层div要写dropdown
触发元素
隐藏元素
a.dropdown-item菜单项
2.按钮组
在外部包裹div上添加btn-group类，创建按钮组
Apple
HuaWei
SamSung
使用btn-group-lg/sm 控制按钮组大小
使用btn-group-vertical 来创建垂直按钮组
3.信息提示框
×
请检查用户信息
提示框使用alert当作基本类
alert-danger/warning/.....改变提示框颜色
.alert-dismissible .close{}的组合在控制关闭的小x在右边
点击小x能够关闭提示框，data-dismiss="alert"
4.导航
boot提供了 三种形式的导航
水平导航，选项卡导航，胶囊导航
1.水平导航
1.通过设置ul的nav让内部li变为弹性布局
所有的弹性样式都可以使用
justify-content-end/center/between/around
flex-row/column......
2.三层结构 ul.nav.nav-justified>li.nav-item>a.nav-link
3. .nav-justified .nav-item配合，让每个导航项等宽显示
2.选项卡导航
使用.nav-tabs类可以将导航转换为选项卡
选项卡的内容，使用div.tab-content>div.tab-pane(隐藏)
切换选项卡
home....
.....
3胶囊导航
.nav-pills 可以将导航设置成胶囊形状
胶囊动态导航只需要将选项卡中data-toggle="pill"
其它同选项卡导航一样
5.导航栏
是div>ul>li>a
div.navbar创建导航栏，navbar-expand-xl/lg/md/sm来创建响应式的导航栏，大屏幕横向展开，小屏幕垂直堆叠
ul.navbar-nav
li.nav-item
a.nav-link
设置导航栏时，可以在div中使用bg-颜色设置不同的背景颜色
6.折叠
控制内容的隐藏与显示
在
或者中添加data-toggle="collapse"
指向目标内容的id
内容div.collapse 同时添加id
折叠按钮
Lorem ipsum dolor sit amet
7.折叠导航栏
1.创建折叠导航栏，需要在外层div class="navbar nav-expand-sm bg-* navbardark/ligth" navbar-dark/navbar-light 控制是内部brand的字体颜色和按钮中三条横线的颜色
2.外层div内部有不被折叠的a标签 a.navbar-brand
3.隐藏的按钮button.navbar-toggler 根据外包裹div是navbar-dark/light.选取不同的字体颜色和边框颜色，同时在屏幕sm以上隐藏
4.被折叠的导航栏div.collapse+.navbar-collapse+#id
5.给button添加折叠事件和折叠目标 data-toggle="collapse" data-target="#id"
作业：
1.模拟boot官网，完成折叠导航栏
2.完成form表单的样式
3.7个组件敲熟
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
