加入VIP
注册
> 所有资源 学员日志

20200821-叶梦宇-

学员日志 751 4年前 0 云创班主任

学习总结

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前端开发工程师 云创动力 云创集训 开发喵 成都云创动力 成都前端开发工程师 成都物联网 教育生态服务商

相关推荐

评论