网页中有一些复杂的特殊效果，之前必须使用js.dom.jq。boot为我们封装好了很多常用的组件，我们可以直接使用。方便，快捷，但是如果需要个性化的处理，比较繁琐。boot中，大量使用元素的自定义属性，来调用方法
基本结构 div.dropdown 父级，相对定位 button.dropdown-toggle 画向下小三角 ul.dropdown-menu display:none data-toggle=”dropdown”自定义属性的作用 1.当button被点击的时候激活事件 2.自定义属性的值，决定激活哪一个事件
外层div的class有以下几个值 btn-group横向按钮组 btn-group-vertical 纵向按钮组 可以添加btn-group-lg/sm 调整按钮组的大小
×是个× alert 基本类 alert-danger/warning/…提示框颜色 alert-dismissible 为了修饰内部span.close .close 右浮动 data-dismiss=”alert” 自定义属性，事件使用alert的方法执行
基本结构
ul.nav 定义了弹性布局，主轴为x 那么之前学习的所有的弹性布局的样式都可以用 .nav-justified>.nav-item 要同时设置，让元素等宽显示 a.nav-link 块级，设置了hover,focus等样式
基本结构 上层是选项卡 ul.nav.nav-tab>li.nav-item>a.nav-link 下层内容 div.tab-content>div.pane ul.nav 变成选项卡添加类 nav-tab nav-tab设置了自己的孩子nav-item和nav-link a标签添加自定义属性 data-toggle=”tab” 以tab的方式激活事件 绑定目标元素a的href属性指向下面内容的id值 div.tab-content>div.tab-pane配合使用 让div.tab-pane都是display:none 然后div.tab-pane要写id,让a标签绑定
ul的nav-tabs改成nav-pills a的data-toggle=”tab” 改成data-toggle=”pill” 其他与选项卡导航一样
效果： 最外层，div.navbar.navbar-expand-xl/lg/md/sm .navbar-expand-xl/lg/md/sm作用，作为子元素ul.navbar-nav的选择器条件，让ul.navbar-nav的主轴方向从y轴变成x轴（ul.navbar-nav 原本主轴方向是y轴） 响应式的导航栏，以.navbar-expand-lg为例， 超大屏，大屏，li横向显示 中屏，小屏，li纵向显示 div.navbar-expand-* 配合ul.navbar-nav可以让导航栏在不用屏幕下，横向或者纵向显示。
折叠，需要折叠内容添加.collapse—>display:none 折叠事件 data-toggle=”collapse” 折叠目标 如果使用a，就可以使用href=”” 如果使用button，则使用data-target=””
总结： 1…collapse不能和.card-body 在同一个标签上，不然会发生折叠/显示的卡顿。 解决方案 div.collapse>div.card-body 2.多个折叠部分，可以同时打开，而不是开启一个，其他的关闭 解决方案：在所有的card的外部，添加一个父元素div#parent在所有的div.collapse上添加自定义属性data-parent=”#parent” 这样就可以保证，在外层div中，只存在一个折叠区域被打开
1.div.navbar-expand-sm和.anvabar-toggler的关系和作用 2.在外层div中navbar-dark/light的作用 这个类对本div没有任何修饰 修饰的是后代元素的字体颜色 3.navbar-collapse的作用 .navbar-expand-sm.navbar-collapse配合 让ul的父级div在sm/md/lg/xl下显示 在xs下，ul的父级div执行.collapse的样式，隐藏 4.小总结 .navbar-expand-sm决定了几件事？
1.按钮在sm以上隐藏，在sm以下显示 2.决定了ul在sm以上横向显示，在sm以下垂直显示 3.折叠div在sm以上显示，在sm以下隐藏
--------------20190522达内学习笔记