欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

第七章之菜单按钮图标组件_javascript技巧

程序员文章站 2022-04-24 20:11:37
...
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.小图标组件

2.下拉菜单组件

3.按钮组组件

4.按钮式下拉菜单

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

一.小图标组件

Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件链接:

http://v3.bootcss.com/components/#glyphicons

部分图标如下:

第七章之菜单按钮图标组件_javascript技巧

可以使用标签来配合使用,具体如下:

//使用小图标

 
//也可以结合按钮



 

二.下拉菜单组件

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

//基本格式
 

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

//设置向上触发
//菜单项居右对齐,默认值是 dropdown-menu-left
相关标签: 菜单按钮图标 菜单组件

上一篇: 怎样编写高性能HTML网页

下一篇: Html+css怎样实现纯文字和带图标的按钮

推荐阅读