⑧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 ...
随机推荐
- 【JVM命令系列】javap
命令基本概述 javap是JDK自带的反汇编器,可以查看java编译器为我们生成的字节码.通过它,可以对照源代码和字节码,从而了解很多编译器内部的工作.可以在命令行窗口先用javap -help看下j ...
- Docker入门之四搭建私有仓库
前面学习了下镜像和容器,今天来学习下仓库,来搭建本地私有仓库.当然可以使用远程的共有的仓库,但在企业中有的还是放在本地,所以需要搭建私有仓库. 一.搭建仓库 可以在容器中run一个仓库镜像. dock ...
- Island Perimeter
You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 represen ...
- Chrome Extension in CLJS —— 搭建开发环境
前言 磨刀不误砍柴工,本篇将介绍如何搭建Chrome插件的ClojureScript开发环境. 具体工具栈:vim(paredit,tslime,vim-clojure-static,vim-fir ...
- hadoop（一）之初识大数据与Hadoop
前言 从今天起,我将一步一步的分享大数据相关的知识,其实很多程序员感觉大数据很难学,其实并不是你想象的这样,只要自己想学,还有什么难得呢? 学习Hadoop有一个8020原则,80%都是在不断的配置配 ...
- CentOS7 Redis安装
Redis介绍 1.安装Redis 官方下载地址:http://download.redis.io 使用Linux下载:wget http://download.redis.io/redis-stab ...
- Python实战之文件操作的详细简单练习
['_CHUNK_SIZE', '__class__', '__del__', '__delattr__', '__dict__', '__dir__', '__doc__', '__enter__' ...
- Spring -- 配置bean的三种方法
配置通过静态工厂方法创建的bean public class StaticBookFactory { //静态工厂方法: public static Book getBook(String bookN ...
- 在sqlserver2005/2008中备份数据库，收缩日志文件
---1.先备份数据库(含日志文件) use myhis go backup database myhis to disk='d:\myhis_rzbak' go ---2.设为简单恢复模式 use ...
- C# winform小票打印
(1)自定义纸张设置 控制面板->打印机和传真->右键->服务器属性->创建新的格式 (2)自定义纸张使用 this.printDocument1.DefaultPageSet ...