⑨bootstrap组件 按钮式下拉菜单 输入框 使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--移动设备优先--> <title>bootstrap</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"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> </style> </head> <body> <div class="container"> <h1>基本用法</h1> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" /> <span class="input-group-addon">.00</span> </div> <div class="input-group input-group-lg"> <span class="input-group-addon glyphicon glyphicon-user"></span> <input type="text" class="form-control" /> </div> <div class="input-group"> <span class="input-group-addon glyphicon glyphicon-user"></span> <input type="text" class="form-control" /> </div> <div class="input-group input-group-sm"> <span class="input-group-addon glyphicon glyphicon-user"></span> <input type="text" class="form-control" /> </div> <hr/> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" /> </span> <input type="text" class="form-control" /> </div> <hr /> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-danger">OK</button> <button type="button" class="btn btn-danger">OK</button> <button type="button" class="btn btn-danger">OK</button> </span> <input type="text" class="form-control" /> </div> <hr/> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">项目</a></li> <li><a href="#">项目</a></li> <li><a href="#">项目</a></li> </ul> </div> <input type="text" class="form-control" /> </div> </div> </body> </html>
⑨bootstrap组件 按钮式下拉菜单 输入框 使用基础案例的更多相关文章
- Bootstrap按钮式下拉菜单
前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...
- 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单
下拉菜单 dropdown 对齐方式: .dropdown-menu-right .dropdown-menu-left <div class="container" ...
- 用bootstrap和css3制作按钮式下拉菜单
利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...
- Bootstrap下拉菜单、按钮式下拉菜单
1. 概述 下拉菜单使用频率也是比较高的,比较常见的使用场景是在导航菜单栏,某个主菜单含有下拉的子菜单. Bootstrap为下拉菜单提供了两种实现方式,即普通的下拉菜单还有按钮式的下拉菜单.我们先看 ...
- Bootstrap3系列:按钮式下拉菜单
1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...
- Bootstrap系列 -- 24. 下拉菜单基本用法
在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文 ...
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)
实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input> ...
- 【Bootstrap】 bootstrap-select2下拉菜单插件
这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...
- Bootstrap系列 -- 27. 下拉菜单对齐方式
Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right ...
随机推荐
- Java中的对象和引用
<Java编程思想>中有一段关于对象的说法: "按照通俗的说法,每个对象都是某个类(class)的一个实例(instance),这里,'类'就是'类型'的同义词." 简 ...
- SpringMVC——使用RequestDispatcher.include()和HttpServletResponseWrapper动态获取jsp输出内容
介绍本篇内容前,先抛出我遇到的问题或者说是需求!(精读阅读本篇可能花费您15分钟,略读需5分钟左右) 一:需求说明 有一个Controller有两个方法 第一个方法通过指定的路径和参数去渲染jsp内容 ...
- Ubuntu升级出现/boot空间不足解决
经常升级Linux内核,导致更新时警告/boot分区空间不足.这是以为多次升级内核后,导致内核版本太多,清理一下没用的内核文件就行了.命令如下: zht@zht-Ubuntu:~$ dpkg -l ' ...
- Find The Multiple (poj1426 一个好的做法)
Find The Multiple Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 16505 Accepted: 673 ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(02授权过滤器)
授权过滤器 概念介绍 在之前的文章中我们已经带大家简单的了解了下过滤器,本次我们开始介绍授权过滤器. 我们之前提到过授权过滤器在认证过滤器之后,其他过滤器和方法被调用之前运行,而授权过滤器和它名字的含 ...
- 纠错:基于FPGA串口发送彩色图片数据至VGA显示
今天这篇文章是要修改之前的一个错误,前面我写过一篇基于FPGA的串口发送图片数据至VGA显示的文章,最后是显示成功了,但是显示的效果图,看起来确实灰度图,当时我默认我使用的MATLAB代码将图片数据转 ...
- cocos2dx - 生成怪物及AI
接上一节内容:cocos2dx - tmx地图分层移动处理 本节怪物及简单AI实现 一.怪物 同cocos2dx - v2.3.3编辑器骨骼动画 里创建的CPlalyer一样,新建一个CMonster ...
- 《阿里巴巴Java开发规约》插件使用介绍
一.简介 阿里巴巴于10月14日在杭州云栖大会上,正式发布了<阿里巴巴Java开发规约>扫描插件!该插件基于<阿里巴巴Java开发规约>手册内容,在扫描代码后,将不符合规约的代 ...
- JavaScript适配器模式
适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象. 基本理论 适配器模式:将一个接口转换成客户端需要的接口而不 ...
- memcached+狀態模式+工廠方法使用
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...