Bootstrap3基础 dropdown divider 下拉列表中的分割线
内容 | 参数 |
---|---|
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 下拉列表中的分割线的更多相关文章
- Bootstrap3基础 栅格系统 列中有行,行中有列
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- android中去掉ListView控件中的分割线
通过设置android:divider="@null" ,可以去掉ListView控件中的分割线 也可以自定义分割线的颜色,比如: <ListView android:id= ...
- 使用 JavaScript 在下拉列表中获取选定的值
使用 JavaScript 在下拉列表中获取选定的值 演示Demo 使用 JavaScript 在下拉列表中获取选定的值? <!DOCTYPE html> <html> < ...
- 【我的Android进阶之旅】如何去除ListView中Header View、Footer View中的分割线
最近的项目中给ListView 加入了一个Header View之后,发现Header View的下方也有了分割线,很难看,UI要求将Header View的分割器去掉,好吧.现在就来说一说如何如何去 ...
- 如何在select下拉列表中添加复选框?
近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...
- <from>;<input>;readonly:只读;disabled:不可用;checked:用来做选中;selected:用在下拉列表中,设置那一项被选中
表单元素: ①②③④⑤⑥⑦★ 一.<from> 1. 代表表单 2 . action:提交为哪个页面 method:① get :显示提交,由长度限制 ② post: 隐藏提交 二.文 ...
- JavaScript基础:数据类型的中的那些少见多怪
原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...
- Java基础:Object类中的equals与hashCode方法
前言 这个系列的文章主要用来记录我在学习和复习Java基础知识的过程中遇到的一些有趣好玩的知识点,希望大家也喜欢. 一切皆对象 对于软件工程来说面向对象编程有一套完整的解决方案:OOA.OOD.O ...
- {Django基础六之ORM中的锁和事务}一 锁 二 事务
Django基础六之ORM中的锁和事务 本节目录 一 锁 二 事务 一 锁 行级锁 select_for_update(nowait=False, skip_locked=False) #注意必须用在 ...
随机推荐
- PHP与JSP简单比较
比较PHP和JSP这两个Web开发技术,在目前的情况是其实是比较php和Java的Web开发.以下就几个主要方面进行的比较: 一. 语言比较 PHP是解释执行的服务器脚本语言,首先php有简单容易上手 ...
- python 爬qidian小说
import re import urllib.request from bs4 import BeautifulSoup import time url=input("第一章网址:&quo ...
- 原生js实现图片轮播效果
思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...
- linux小倒腾
1.vim安装,sudo apt-get install vim-gtk,于是vim就安装好了.当然在我电脑上还出现了gvim,简单的vim配置(etc/vim/vimrc): "我的设置 ...
- Rigid Frameworks (画图二分图规律 + DP + 数学组合容斥)
题意:方格n*m,然后对于每一个格子有3种画法1左对角线2右对角线3不画,求让图形稳定的画法有多少种? 思路:通过手画二分图可以发现当二分图联通时改图满足条件,然后我们对于一个dp[n][m]可以利用 ...
- 前端和后台BUG区分方法
测试工程师不只是负责发现问题,除了发现问题这种基本功外,定位问题,提出解决方案,提出预防方案也是要掌握的技能.这里先说定位问题的要求,定位问题要向深入,前提当然是对功能.产品的流程.开发方案.开发人员 ...
- org/hibernate/ejb/HibernatePersistence
java.lang.NoClassDefFoundError: org/hibernate/ejb/HibernatePersistence 缺少依赖包:hibernate-entitymanager ...
- impala与hive的比较以及impala的有缺点
最近读的几篇关于impala的文章,这篇良心不错:https://www.biaodianfu.com/impala.html(本文截取部分内容) Impala是Cloudera公司主导开发的新型查询 ...
- 【JavaScript 6连载】三、构造函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- python--表达式(运算表达式)
运算表达式 python 的表达式包括:算术运算符,赋值运算符,比较运算符,成员运算符 算术运算符 运算符 描述 + 加 - 两个对象相加 - 减 - 得到负数或是一个数减去另一个数 * 乘 - 两个 ...