bootstrap-下拉选项

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表单控件——下拉选项</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
        data-toggle="dropdown">
        下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
          </ul>
    </div> 

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>

时间： 2024-11-03 22:02:15

bootstrap-下拉选项的相关文章

Bootstrap 下拉菜单（Dropdowns）

本章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <div class="dropdown"> <button type="button" class="btn dropdown-toggl

Bootstrap下拉菜单

[Bootstrap 下拉菜单] <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </but

Excel的单元格设置下拉选项并填充颜色

如何在Excel的单元格中加入下拉选项方法/步骤第一步:打开excel文档,选中需加入下拉选项的单元格. 第二步:点击菜单中的"数据"->"数据有效性"->"数据有效性". 第三步:在弹出的页面中设置菜单下,点击"允许"下选择"序列"按钮. 第四步:在来源中输入单元格中需设置的下拉选项,用英文的逗号","隔开,然后点击确定按钮. 即可得到我们要的效果. 怎么

bootstrap下拉框的例子，提示Error: Bootstrap's JavaScript requires jQuery

bootstrap很多js依赖jquery,所以需要引入jquery 遇到的问题: 页面访问提示:Error: Bootstrap's JavaScript requires jQuery 解决方法: 在引入bootstrap的js文件之前,先引入jquery.js 导入顺序可以向下面一样 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><link rel

Bootstrap 下拉菜单disabled

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 下拉菜单</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"&g

Android ActionBar下拉选项

package com.example.actionBarTest.actionBarList; import android.app.ActionBar; import android.app.Activity; import android.app.Fragment; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.SpinnerAdapter; import com.ex

Bootstrap 下拉菜单

1.下拉菜单基本介绍下拉菜单是可以切换的,是以列表格式显示链接上下文. 基本格式: <div class="dropdown">  <button class="btn dropdown-toggle" data-toggle="dropdown"> 标题<span class="caret"></span> </button> &l

下拉选项设置数据的三种方式介绍

度量快速开发平台中,在智能窗体上拖入下拉选择,可以实现很多功能.比如制作查询条件,选择数据等. 方法1:直接在下拉选择右边属性中设置数据. 使用效果: 该方法设置简答,对于那种是固定数据的设置,可以采用这样的效果实现.下拉选项1.Value 与下拉选项1.SelectedText 获取的值都一样. 方法2:用下拉选项的SetItems方法实现下拉选项1.SetItems("A,B,C,D",false) 效果与方法一一样,这个方法可以动态的来设置数据,比如根据不同的条件设置不同

Bootstrap下拉菜单的认识误区

Bootstrap下拉菜单HTML有两种写法: 一.内置式: <div class="dropdown"> <button class="btn btn-primary" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <

Easyui Datagrid 的Combobox 如何动态修改下拉选项，以及值的转换

我是先将下拉选项的值通过datagrid的url查出来了,在每一行的row中 //项目结果选项卡的列表 $('#project_table').datagrid({ width : '100%', height: '378', url : 'getSeparationProjectInf', //title : '待分发条码列表', striped : true, nowrap : true, rownumbers : true, singleSelect : false, showHeader