bootstrap3之下拉菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">选项1</a></li>
            <li><a href="#">选项2</a></li>
            <li><a href="#">选项3</a></li>
            <li class="divider"></li>
            <li><a href="#">选项4</a></li>
        </ul>
    </div>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

时间： 2024-10-20 14:18:33

bootstrap3之下拉菜单的相关文章

微信小程序开发之下拉菜单

实现功能:点击维保人员,调出下拉菜单.选择子菜单时,显示右边的图标表示选中,并进行赋值并进行搜索筛选 Wxml: <view class="dtclass" bindtap="loadtype"><span>{{SercherType}}</span>    <image src="../../images/xiala.png" style="height:10px;width:20rpx;ma

自动化测试——Selenium+Python之下拉菜单的定位

1.通过selenium.webdriver.support.ui的Select进行定位 下拉菜单如下图: 定位代码(选择Male): ...from selenium.webdriver.support.ui import Select...    # 通过index进行选择    Select(driver.find_element_by_id("gender")).select_by_index(1)    # 通过value进行选择    Select(driver.find_

jQueryMobile的组件之下拉菜单(selectMenu)

以下是一个最基本的下拉菜单示例,更多细节请参考jQueryMobile的手册 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>

Bootstrap学习js插件篇之下拉菜单

案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. [javascript] view plaincopy <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <butt

JS特效之下拉菜单

<style>.btn{ background-color:#06C;                                                                                               color:#FFF; padding:16px; font-size:16px; border:none; cursor:pointer; } .sel{ position:relative; display:inline-block;

Bootstrap组件之下拉菜单

.dropdown--设置父元素为下拉菜单组件,向下弹出子菜单: .dropup--设置父元素为下拉菜单组件,向上弹出子菜单: .dropdown-toggle--设置按钮为下拉菜单切换按钮: .dropdown-menu--设置ul元素为下拉菜单: .dropdown-menu-right--将菜单右对齐: .pull-right--将菜单组件的父元素右对齐: .dropdown-header--为菜单项添加标题: .divider--为菜单项添加分割线: .disabled--禁用相应菜单项

HTML导航之下拉菜单方法3——JQuery下拉菜单

代码: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单之JQuery</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 border: 0; 11 } 12 /*基本代码*/ 13 #dropdown

HTML导航之下拉菜单方法1——CSS下拉菜单

代码: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单之CSS</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 border: 0; 11 } 12 /*基本代码*/ 13 #dropdown {

HTML+CSS导航之下拉菜单方法1——JS

代码: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单之JS</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 border: 0; 11 } 12 /*基本代码*/ 13 #dropdown { 1