内容 参数
  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. Opcode是啥以及如何使用好Opcache

    转载  https://www.zybuluo.com/phper/note/1016714 啥是Opcode? 我们在日常的PHP开发过程中,应该经常会听见Opcache这个词,那么啥是Opcode ...

  2. sql 存储过程命名规范

    规范的命名可以提高开发和维护的效率,如果你正在创建一个新的存储过程,请参考如下的命名规范. 句法: 存储过程的命名有这个的语法:[proc] [MainTableName] By [FieldName ...

  3. armv8 memory translation table descriptor

    上一节大致给出了descriptor的结构,这篇细致分析各个field: 1) Table Descriptor:stage2中不包含任何的attribute的field,每个level中的descr ...

  4. Codeforces Round #324 (Div. 2) E

    这题贪心,考虑先放第一个,然后从第一个数在p中的位置, 不断的往前走,和在他后面的那些数组进行交换,因为这样交换可以提高最大的效率,就是说你花费了1但是使得两个点都朝他的木匾节点减少了1 #inclu ...

  5. 如何重置Sitecore CMS中的管理员密码

    在Sitecore项目上工作时,有时管理员凭据会丢失或损坏.在这些情况下,重新获得快速访问权限以便不中断开发非常重要. 对Core数据库运行以下查询,您将能够admin/b再次使用以下命令登录Site ...

  6. 如何删除Sitecore CMS中的项目

    在此“如何”帖子中,我将介绍如何删除项目以及如何在Sitecore CMS中恢复已删除的项目. 删除项目 有多种方便的方法可以删除Sitecore中的项目. 从功能区 在内容树中选择您要删除的项目. ...

  7. 排序(Sort)-----插入排序

       声明:文中动画转载自https://blog.csdn.net/qq_34374664/article/details/79545940    1.插入排序简介 插入排序(InsertSort) ...

  8. 注意！list和array是不同的

     python中的list是python的内置数据类型,list中的数据类型不必相同的,而array的中的数据类型必须全部相同. numpy中封装的array有很强大的功能,里面存放的都是相同的数据类 ...

  9. Django后端项目----restful framework 认证源码流程

    一.请求到来之后,都要先执行dispatch方法,dispatch方法方法根据请求方式的不同触发get/post/put/delete等方法 注意,APIView中的dispatch方法有很多的功能 ...

  10. How to click on a point on an HTML5 canvas in Python selenium webdriver

    https://stackoverflow.com/questions/29624949/how-to-click-on-a-point-on-an-html5-canvas-in-python-se ...