菜单的制作

下拉菜单,要有一个下拉的效果,一个Dropdown按钮和右侧有个小图标caret,这个小图标和按钮的文本是平级的。

button按钮中有个dropdown-tooggle,还有一个data-toggle属性,根据这个属性来弹出下拉列表。

然后接着ul标签的dropdown-menu是和上面button按钮的样式类dropdown-toggle联合使用,在通过aria-labelledby绑定

上面的button按钮。示例代码:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

字体图标,图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span>标签,并将图标类应用到这个 <span> 标签上。

图标类只能应用在不包含任何文本内容或子元素的元素上。

也可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。示例代码:

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
时间: 2024-10-07 02:39:45

菜单的制作的相关文章

行内/块级垂直居中、图像文本替换以及二级下拉菜单的制作

经过近一个月对HTML与css的学习,利用HTML以及div+css对简单的静态网页进行简单的布局有了一定的基础,但是对于网页结构布局的分析.部分属性的使用存在着问题,希望在以后的学习能有所提高,这里就最近的学习情况进行一下总结与归纳: 一.行内元素与块级元素水平.垂直居中问题 (一)CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px}

径向菜单的制作

最终效果: 在径向菜单的制作前,首先需要知道几点知识点: Math.sin(x)      x 的正玄值.返回值在 -1.0 到 1.0 之间: Math.cos(x)    x 的余弦值.返回的是 -1.0 到 1.0 之间的数: 这两个函数中的X 都是指的“弧度”而非“角度”,弧度的计算公式为: 2*PI/360*角度,使用js表示是这样的:Math.PI/180*度数(1度=180/Math.PI) 如:30° 角度 的弧度 = 2*PI/360*30 如何计算圆的极坐标(用于计算出子菜单

简易菜单的制作

为大家提供一种简易的菜单的制作方法,代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href=""> <title></title> </head>

Web网页简单的静态导航菜单的制作

Web网页导航菜单的制作 最近初学Html/Css,今天学习了一个简单的静态导航条的制作.属于很简单,很基础的东西. 思路:导航菜单–>书籍的目录,条目性结构–>用无需列表构建导航菜单 1. 首先在html代码中建立ul: <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li>

手风琴菜单的制作

用到的知识点如下: 一.jQuery 1.slideDown()向下展示 2.slideUp()向上卷起 3.slideToggle()依次展开或卷起某个元素 二.jQuery链式调用 jquery对象的方法在执行完之后返回这个jquery对象,所有的jQuery对象的方法可以连起来写: $("#div1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("u

css分类导航和圆角菜单的制作

#纵向分类 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*清除默认的边框*/ *{margin: 0px;padding: 0px;} /*不显示li前面的.号 */ ul{list-style: none;width: 100px;} /*

下拉菜单的制作无js

下拉菜单有许多种制作方法: 今天我们就做最简单的一种: 话不多说先看html <body> <div class="menubox"> <ul> <li class="list1"><a href="">首页</a></li> <li class="list1"><a href="">公司简介<

菜单的制作 纯css :hover事件

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>选项卡的制作</title> <script src="../js/try.js"></script> <style> /*整体设置*/ *{ margin:0; padding:0; } #menu

css学习:斜角菜单的制作

制作斜角菜单就是利用边框的接角构造一个斜角,每一个菜单项的a元素,放置一个span元素,设置为corner类,实现斜角效果. 设置a元素为相对定位,a是span的子元素设置其为绝对定位,再设置span的top和left为零,以便使斜角定位在以边框为界的左上角. 以下代码显示效果如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

[刘阳Java]_CSS菜单侧边栏制作

再来写一个菜单侧边栏的制作,先看截图 源代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-family: "微软雅黑"; font-siz