内容 参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

 

code

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!-- IE将使用最新的引擎渲染网页 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 页面的宽度与设备屏幕的宽度一致

         初始缩放比例 1:1 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <meta name="author" content="www.cnblogs.com/kemingli">

    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <!-- start : demo -->

    <div class="container" style="background-color:gray;">

        <h2 class="page-header">下拉列表</h2>

        <div class="dropdown">

            <!--

                这个触发器 data-toggle="dropdown"

                你要点谁，就给谁加

                在这里，我点的是button，所以就给buttion加

              -->

            <button class="btn btn-primary" data-toggle="dropdown">

                登录<span class="caret"></span>

            </button>

            <ul class="dropdown-menu">

                <li><a href="#">子鼠</a></li>

                <li><a href="#">丑牛</a></li>

                <li><a href="#">寅虎</a></li>

                <li class="divider"></li>

                <li><a href="#">卯兔</a></li>

                <li><a href="#">辰龙</a></li>

                <li><a href="#">已蛇</a></li>

            </ul>

        </div>

    </div>

    <!-- end : demo -->

    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->

    <script src="bootstrap/js/jquery.min.js"></script>

    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

result

 

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

 

Bootstrap是前端开源框架，优秀，值得学习。

博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。

Firefox是开源的浏览器，优秀，值得关注。

面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。

博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

Bootstrap3基础 dropdown divider 下拉列表中的分割线的更多相关文章

  1. Bootstrap3基础 栅格系统 列中有行，行中有列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. android中去掉ListView控件中的分割线

    通过设置android:divider="@null" ,可以去掉ListView控件中的分割线 也可以自定义分割线的颜色,比如: <ListView android:id= ...

  3. 使用 JavaScript 在下拉列表中获取选定的值

    使用 JavaScript 在下拉列表中获取选定的值 演示Demo 使用 JavaScript 在下拉列表中获取选定的值? <!DOCTYPE html> <html> < ...

  4. 【我的Android进阶之旅】如何去除ListView中Header View、Footer View中的分割线

    最近的项目中给ListView 加入了一个Header View之后,发现Header View的下方也有了分割线,很难看,UI要求将Header View的分割器去掉,好吧.现在就来说一说如何如何去 ...

  5. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

  6. <from>；<input>；readonly:只读；disabled:不可用；checked:用来做选中；selected:用在下拉列表中，设置那一项被选中

    表单元素: ①②③④⑤⑥⑦★ 一.<from> 1. 代表表单 2 . action:提交为哪个页面 method:①  get :显示提交,由长度限制 ②  post: 隐藏提交 二.文 ...

  7. JavaScript基础：数据类型的中的那些少见多怪

    原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...

  8. Java基础：Object类中的equals与hashCode方法

    前言 这个系列的文章主要用来记录我在学习和复习Java基础知识的过程中遇到的一些有趣好玩的知识点,希望大家也喜欢. 一切皆对象   对于软件工程来说面向对象编程有一套完整的解决方案:OOA.OOD.O ...

  9. {Django基础六之ORM中的锁和事务}一 锁 二 事务

    Django基础六之ORM中的锁和事务 本节目录 一 锁 二 事务 一 锁 行级锁 select_for_update(nowait=False, skip_locked=False) #注意必须用在 ...

随机推荐

  1. ES6 变量的解构

    默认值 let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ...

  2. HDU 6298

    Problem Description Given an integer n, Chiaki would like to find three positive integers x, y and z ...

  3. <script> 属性crossorigin

    今日偶然见到如下代码: <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper. ...

  4. Orangegreenworks封装rpgmakermv

    You’ll get a zip file with a folder called “lib” and a file called greenworks.js. Put both of them o ...

  5. wxpython(python3.5)安装

    安装步骤: http://blog.csdn.net/xiaodong193/article/details/51920283 注意:安装软件前需要阅读其中的README.txt,可快速知道安装方法, ...

  6. mybatis-config.xml

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC ...

  7. 调用微信JS-SDK配置签名

    前后端进行分开开发: 1:后端实现获取 +++接口凭证:access_token (公众号的全局唯一接口调用凭据) ** GET 获取:https://api.weixin.qq.com/cgi-bi ...

  8. javascript常用积累

    一.JS动画与动作不一致解决: if(!$( "#handle").is(":animated")){ //判断元素是否处于动画状态 } 二.停止事件冒泡 ev ...

  9. 证券化代币的时代已经到来，STO将引爆区块链经济

    STOs 似乎会在 2019 年取代 ICOs,即使不是完全取代,但置换的比例也会相当大.所有在美上市的公司都将按照 SEC 制定的相关规定进行交易.Vellum Capital 的 CEO 兼管理合 ...

  10. [转载]DLL命名规则

    程序集是一个部署单元,同时还代表托管代码程序的身份.一般来说一个程序集仅与一个DLL相对应.本节主要讲DLL命名约定,程序集的命名约定与此类似. 要记住,名字空间与DLL和程序集是不同的概念.名字空间 ...