内容 参数
  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. MyBatis基础入门《十》添加数据

    MyBatis基础入门<十>添加数据 描述: 修改了实体类:TblClient.java,将其字段:cbirthday 由String类型改成了Date类型. TblClient.java ...

  2. 1.display:flex布局笔记

    /*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...

  3. C# 语言 - 一个优雅的分页实现

    这篇文章介绍分页对象的封装,如何优雅的对数据进行分页. 先上调用代码: 我们希望能在一个Enumerable对象后面直接.ToPagedList(pageIndex,pageSize)这样优雅的调用分 ...

  4. 《A Structured Self-Attentive Sentence Embedding》（注意力机制）

    Background and Motivation: 现有的处理文本的常规流程第一步就是:Word embedding.也有一些 embedding 的方法是考虑了 phrase 和 sentence ...

  5. CSS背景与边框属性-----box-shadow

    box-shadow:none | <shadow> [ , <shadow> ]*   <shadow> = inset? && <leng ...

  6. GZIPOutputStream GZIPInputStream

    GZIP is appropriate for single data stream. Example: Compress one file public class Demo8 {  public ...

  7. C# foreach 中获取索引index的方法[转]

    在C# 开发中往往使用foreach 循环语句 来代替for循环语句.foreach 比 for 更加简洁高效.           foreach :                 foreach ...

  8. JAVA基础1---Object类解析

    1.Object简介 众所周知,Object类是Java所有类的万类之源,所有Java类都是继承之Object类,而默认就直接忽略了extends Object这段代码. 2.Object类的源码 话 ...

  9. c# 规范用户输入控件

    MaskedTextBox控件是一种特殊的文本框,它可以通过Mask属性设置格式标记符.在应用程序运行后,用户只能输入Mask属性允许的内容,列入日期.电话等 在“输入掩码”对话框的右下角有一个“使用 ...

  10. Android获取全局Context的方法

    Android获取全局Context的方法 Android--应用全局获取Context - 超宇的博客 - CSDN博客https://blog.csdn.net/chaoyu168/article ...