⑧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">
<!-- 最新的 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">
<span class="glyphicon glyphicon-plus"></span>
<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-home"></span> 注册
</button>
<hr />
<div class="btn-toolbar">
<div class="btn-group">
<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-education"></span></a>
<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-ice-lolly-tasted"></span></a>
<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-text-size"></span></a>
<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-education"></span></a>
</div>
</div>
<hr/>
<button type="button" class="btn btn-default btn-sx">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
<hr />
<div class="col-sm-3 col-sm-offset-2">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-education"></span>
</span>
<input type="text" class="form-control" />
</div>
</div>
</div>
</body>
</html>
<!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">
<div class="dropdown col-sm-3 col-sm-offset-2">
<button type="button" class="btn btn-danger" data-toggle="dropdown" >
<span class="glyphicon glyphicon-user"></span>
用户
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-left">
<li class="dropdown-header">文件管理</li>
<!--标题-->
<li class="active"><a href="#">
<!--分割线-->
<span class="glyphicon glyphicon-off"></span>
文件</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">文件</a></li>
<li class="divider"></li>
<li><a href="#">文件</a></li>
</ul>
</div>
</div>
</body>
</html>
<!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">
<hr />
<div class="btn-group">
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
</div>
<hr />
<div class="btn-group">
<a href="#" class="btn btn-default">按钮组1</a>
<a href="#" class="btn btn-default">按钮组1</a>
<a href="#" class="btn btn-default">按钮组1</a>
</div>
<hr/>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
</div>
<hr/>
<div class="btn-group btn-group-xs">
<!--设置了btn-group-xs以后里面设置的btn-lg -sm不起作用-->
<button type="button" class="btn btn-default btn-lg">按钮组</button>
<button type="button" class="btn btn-default btn-sm">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
</div>
</div>
<hr/>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
<div class="btn-group dropdown">
<button type="button" class="btn btn-info dropdown-toggle" 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><a href="#">项目</a></li>
</ul>
</div>
</div>
<hr />
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
<button type="button" class="btn btn-default">按钮组</button>
</div>
<div class="row">
<!--自适应分组-->
<div class="col-sm-6">
<div class=" btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮组1</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮组2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮组3</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例的更多相关文章
- BootStrap学习(2)_下拉菜单&按钮组
一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...
- Bootstrap入门（八）组件2：下拉菜单
Bootstrap入门(八)组件2:下拉菜单 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link ...
- Bootstrap历练实例：下拉菜单插件方法的使用
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap 字体图标、下拉菜单、按钮组
Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...
- 初学者--bootstrap（六）组件中的下拉菜单----在路上（10）
组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...
- 封装dropdown模块（使用到之前写好的动画组件，封装下拉菜单）
用 showhide 改写dropdown 模块: 1.首先在 css中新增动画相关样式 /*showhide组件的样式*/ .fadeOut{ opacity:; visibility: hidde ...
- Bootstrap中的各种下拉菜单
@*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...
- bootstrap和JS实现下拉菜单
// bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...
- Bootstrap练习：可折叠下拉菜单
代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...
随机推荐
- Go语言下载、安装、配置、使用
Go语言 Go语言(Golang,The Go Programming Language),是谷歌2009发布的第二款开源编程语言.2009年7月份,谷歌曾发布了Simple语言,它是用来开发Andr ...
- Linux 启动详解之init
1.init初探 init是Linux系统操作中不可缺少的程序之一.init进程,它是一个由内核启动的用户级进程,然后由它来启动后面的任务,包括多用户环境,网络等. 内核会在过去曾使用过init的几个 ...
- Hive基础（5）---内部表 外部表 临时表
1.外部表 关键字:EXTERNAL 外部表创建时需要指定LOCATION 删除外部表时,数据不被删除 CREATE EXTERNAL TABLE page_view(viewTime INT, us ...
- hdu4027 开方，记录
A lot of battleships of evil are arranged in a line before the battle. Our commander decides to use ...
- PHP和JS判断变量是否定义
PHP中: 通过isset(变量名)来判断,定义返回true/未定义返回false JS中: 通过typeof来判断.
- hdu 5954 -- Do not pour out(积分+二分)
题目链接 Problem Description You have got a cylindrical cup. Its bottom diameter is 2 units and its heig ...
- java远程备份mysql数据库关键问题（限windows环境，亲测解决）
其它环境同理也可解决. 条件:为了使用mysql命令,本机要安装mysql ,我本机安装的是mysql 5.5. 错误1:使用命令 mysqldump -h192.168.1.50 -u root - ...
- IBM Minus One 简单字符处理
IBM Minus One Time Limit: 2 Seconds Memory Limit: 65536 KB You may have heard of the book '2001 ...
- Entity Framework相关介绍
在深入学习某项技术之前,应该努力形成对此技术的总体印象,并了解其基本原理,本文的目的就在于此. 一.理解EF数据模型 EF本质上是一个ORM框架,它需要把对象映射到底层数据库中的表,为此,它使用了三个 ...
- Spring MVC 页面跳转时传递参数
页面仍然使用 JSP,在跳转时如果想传递参数则需要用到类 RedirectAttributes. 首先看看如何打开一个普通页面: // 登录页面(每个页面都要独立的 Action 来支持其呈现) @R ...