⑧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 ...
随机推荐
- 在 JavaScript 中使用构造器函数模拟类
今天,我们要讲的是在 JavaScript 中使用构造器函数(construcor function)模拟类. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统 ...
- Linux入门之常用命令（13） crontab
为当前用户创建cron服务 1. 键入 crontab -e 编辑crontab服务文件 例如 文件内容如下: */2 * * * * /bin/sh /home/admin/jiaoben/bu ...
- JS获取随机的16位十六进制的数
直接上代码: function getRamNumber(){ var result=''; for(var i=0;i<16;i++){ result+=Math.floor(Math.ran ...
- 一文为你详细讲解对象映射库【AutoMapper】所支持场景
前言 在AutoMapper未出世前,对象与对象之间的映射,我们只能通过手动为每个属性一一赋值,时间长了不仅是我们而且老外也觉得映射代码很无聊啊.这个时候老外的所写的强大映射库AutoMapper横空 ...
- yii2-swiftmailer入门
1. 安装 用yii 2.0框架,默认会有这个扩展 composer require --prefer-dist yiisoft/yii2-swiftmailer 修改composer.json,re ...
- 推荐系统架构-(附ppt&代码）
Part1.乐视网视频推荐系统 推荐系统:和传统的推荐系统架构无异(基础建模+规则) 数据模块特点:用户反馈服务数据->kv 缓存->log存储 行为日志->解析/聚合->se ...
- Django数据库操作性能相关
Django数据库操作性能相关 案例: 现在我们的数据库中有两张表如下: 1.职员表: class UserInfo(models.Model): name = models.CharField(ma ...
- Java常用类（三）之StringBuffer与StringBuidler
前言 前面一篇给大家介绍了String类,这个我们经常会用到的一个类,那这一篇给大家分享的是StringBuffer与StringBuidler.等下我也会比较他们三个之间的区别 一.StringBu ...
- Loadrunner检查点使用总结
在使用Loadrunner进行性能测试中,有时需要对性能测试中的功能是否全部正确进行判断.这里就需要用到“检查点”,本文总结了常用三种协议下检查点的使用方法,希望阅读本文后的小伙伴们能够掌握其使用方法 ...
- 小记：Touchpad 禁用和启用
最近上课要背着电脑到处跑,不能带外接键盘,打字时候总会碰到触控版导致光标乱飘,看了下wiki,发现有简单的命令开启或者禁用触控版,记录如下 禁用: # synclient TouchpadOff=1 ...