第七章之菜单按钮图标组件(菜单下一章)

编辑：rootadmin

推荐整理分享第七章之菜单按钮图标组件(菜单下一章)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:菜单按键图标设计,菜单的顺序,“菜单”,菜单按键图标设计,菜单按钮在哪里,菜单按键图标设计,菜单安排,菜单按键图标设计,内容如对您有帮助，希望把文章链接给更多的朋友！

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

学习要点：

1.小图标组件

2.下拉菜单组件

3.按钮组组件

4.按钮式下拉菜单

本节课我们主要学习一下 Bootstrap 的三个组件功能：小图标组件、下拉菜单组件和各种按钮组件。

一．小图标组件

Bootstrap 提供了免费的个小图标（数了两次），具体可以参考中文官网的组件链接：

可以使用<i>或<span>标签来配合使用，具体如下：

二．下拉菜单组件

下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效。对于菜单部分，设置 class="dropdown-menu"才能自动隐藏并添加固定样式。设置 class="caret"表示箭头，可上可下。

三．按钮组组件

按钮组就是多个按钮集成在一个容器里形成独有的效果。

注意：这里<div>中并没有实现 class="dropdown"，通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个 class="dropdown-toggle"即可。

四．按钮式下拉菜单

这个下拉菜单其实和第二个知识点一样，只不过，这个是在群组里，不需要<div>声明class="dropdown"。

以上内容是小编给大家介绍的BootStrap组件之菜单按钮图标组件，希望对大家有所帮助！

第六章之辅组类与响应式工具 Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。学习要点：1.辅组类2.响应式

Bootstrap每天必学之折叠（Collapse）插件折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。如果您想要单独引用该插件

详解Bootstrap插件在前面布局组件章节中所讨论到的组件仅仅是个开始。Bootstrap自带种jQuery插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的JavaSc

本文链接地址:https://www.jiuchutong.com/biancheng/373518.html 转载请保留说明！