20200821-叶梦宇-

学习总结

boot组件

一,导航栏

自定义属性一般都是绑定的事件,通过js实现的。

注意:新浪云可以让网页快速上线

1,按钮组

btn-group 在div上写 代表按钮组

btn-group 按钮工具栏

.btn-gro up-vertical 使用 .btn-group-vertical 类创建垂直的按钮组

父元素div:.dropdown|.dropup|.dropleft|.dropright(代表箭头下拉方向)
子元素btn:.dropdown-toggle 拆分按钮下拉菜单.dropdown-toggle-split
子元素ul:.dropdown-menu下拉列表项
子元素li:.dropdown-item 标题
子元素li:.dropdown-divider 分割线 自定义属性:data-toggle="dropdown"

div class="dropdown">
button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
选择
/button>
div class="dropdown-menu">
a class="dropdown-item" href="#">option1
a class="dropdown-item" href="#">option2
option3

1. .dropdown 类用来指定一个下拉菜单
2. 我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性
3. <div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item 类

下拉菜单中的可用项与禁用项:
active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)
禁用下拉菜单的选项,可以使用.disabled 类

.dropdown-menu-right
下拉菜单右对齐,写在dropdown-menu上 左对齐同理

2,信息提示框

关闭
在提示框中的 div 中添加 .alert-dismissible 类,然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作

3,导航

水平导航 ul class=“nav” li class=“nav-item”

垂直导航ul class="nav flex-column" .flex-column 类用于创建垂直导航

选项卡导航 ul class=“nav nav-tabs” li class=“nav-item” a nav-link

胶囊 导航 ul class=“nav nav-pills” li class=“nav-item” a class="nav-link" data-toggle="pill"

  1. .nav-pills 类可以将导航项设置成胶囊形状
  2. 2. 胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle="pill"

学习总结

这周基本都是新知识,要背的东西真的太多了,我用的也不太熟练,还是要加倍努力练习

标签

web前端开发工程师 云创动力 云创集训 开发喵 成都云创动力 成都前端开发工程师 成都物联网 教育生态服务商

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1