2019web前端学习笔记

web前端学习笔记

组件

网页中有一些复杂的特殊效果，之前必须使用js.dom.jq。boot为我们封装好了很多常用的组件，我们可以直接使用。方便，快捷，但是如果需要个性化的处理，比较繁琐。boot中，大量使用元素的自定义属性，来调用方法

1.下拉菜单

基本结构

div.dropdown 父级，相对定位
button.dropdown-toggle 画向下小三角
ul.dropdown-menu display:none
data-toggle=”dropdown”自定义属性的作用
1.当button被点击的时候激活事件
2.自定义属性的值，决定激活哪一个事件

2.按钮组

<div class=”btn-group”>
   <button></button>
   ......
<div>

外层div的class有以下几个值
btn-group横向按钮组
btn-group-vertical 纵向按钮组
可以添加btn-group-lg/sm 调整按钮组的大小

3.信息提示框

<div class=”alert alert-danger alert-dismissible”>
   <span class=”close”>&times;</span>
   提示的信息
</div>

&times是个×
alert 基本类
alert-danger/warning/…提示框颜色
alert-dismissible 为了修饰内部span.close
.close 右浮动
data-dismiss=”alert” 自定义属性，事件使用alert的方法执行

4.导航

（1）水平导航

基本结构

ul.nav 定义了弹性布局，主轴为x
那么之前学习的所有的弹性布局的样式都可以用
.nav-justified>.nav-item 要同时设置，让元素等宽显示
a.nav-link 块级，设置了hover,focus等样式

（2）选项卡导航

基本结构
上层是选项卡
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标签绑定

（3）胶囊导航

ul的nav-tabs改成nav-pills
a的data-toggle=”tab” 改成data-toggle=”pill”
其他与选项卡导航一样

5.导航栏

效果：

最外层，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可以让导航栏在不用屏幕下，横向或者纵向显示。

6.折叠效果

折叠，需要折叠内容添加.collapse—>display:none
折叠事件 data-toggle=”collapse”
折叠目标
如果使用a，就可以使用href=””
如果使用button，则使用data-target=””

7.卡片

8.卡片+折叠=手风琴

总结：
1…collapse不能和.card-body 在同一个标签上，不然会发生折叠/显示的卡顿。
解决方案 div.collapse>div.card-body
2.多个折叠部分，可以同时打开，而不是开启一个，其他的关闭
解决方案：在所有的card的外部，添加一个父元素div#parent在所有的div.collapse上添加自定义属性data-parent=”#parent”
这样就可以保证，在外层div中，只存在一个折叠区域被打开

9.折叠导航栏

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达内学习笔记