bootstrap 组件
2016-03-27 17:17
567 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hello bootstrap</title> <!-- 载入bootstrap压缩CSS --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body> <div> <h1>你好,世界!</h1> <!-- 载入glyphicon图标 --> <span class="glyphicon glyphicon-search">搜索</span></br> <span class="glyphicon glyphicon-camera">拍照</span></br> <span class="glyphicon glyphicon-circle-arrow-down">下载</span></br> <!-- 基本按钮显示 --> <button type=“button” class="btn btn-default">默认灰色按钮</button> <button type=“button” class="btn btn-primary">蓝色</button> <button type=“button” class="btn btn-info">信息</button> <button type=“button” class="btn btn-success">成功</button> <button type=“button” class="btn btn-warning">警告</button> <button type=“button” class="btn btn-danger">危险</button></br> <a class="btn btn-primaty" href="#" role="button">用a标签必须确定role为button</a> <!-- 按钮大小控制 --> <button type=“button” class="btn btn-default btn-lg">默认灰色按钮</button> <button type=“button” class="btn btn-primary">蓝色</button> <button type=“button” class="btn btn-info btn-sm">信息</button> <button type=“button” class="btn btn-success">成功</button> <button type=“button” class="btn btn-warning btn-xs">警告</button> <button type=“button” class="btn btn-danger">危险</button> <button type=“button” class="btn btn-link">link</button> <!-- 按钮像父块一样大--> <button type=“button” class="btn btn-primary btn-lg btn-block">block level button</button> <button type=“button” class="btn btn-default btn-lg btn-block">block level button</button> <!-- 按钮禁用 --> <button type=“button” class="btn btn-success disabled="disabled">成功</button> <button type=“button” class="btn btn-warning disabled="active">警告</button></br> <!-- 图标载入按钮,看起来有图标文字的按钮 --> <button type=“button” class="btn btn-primary disabled="disabled"><span class="glyphicon glyphicon-play-circle " ></span>   播放</button></br> <button type=“button” class="btn btn-primary disabled="disabled"><span class="glyphicon glyphicon-earphone " ></span>  打电话</button></br> <!-- 按钮一般下拉菜单 --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="false" aria-expanded="false">省份<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">浙江</a></li> <li class="disabled"><a href="#">江苏</a></li> <li><a href="#">广东</a></li> <li role="separator" class="divider"></li> <li><a href="#" onclick="window.close()">山东</a></li> </ul> </div> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </br> <div class="btn-group" role="group"> <!-- <div class="btn-group-vertical" role="group"> --> <div class="btn-group" role="toolbar"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="false" aria-expanded="false">省份<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">浙江</a></li> <li class="disabled"><a href="#">江苏</a></li> <li><a href="#">广东</a></li> <li role="separator" class="divider"></li> <li><a href="#" onclick="window.close()">山东</a></li> </ul> </div> <div class="btn-group" role="toolbar"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="false" aria-expanded="false">城市<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">杭州</a></li> <li class="disabled"><a href="#">宁波</a></li> <li><a href="#">青岛</a></li> <li role="separator" class="divider"></li> <li><a href="#" onclick="window.close()">温州</a></li> </ul> </div> <div class="btn-group" role="toolbar"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="false" aria-expanded="false">区域<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">西湖区</a></li> <li class="disabled"><a href="#">海曙区</a></li> <li><a href="#">崂山区</a></li> <li role="separator" class="divider"></li> <li><a href="#" onclick="window.close()">鹿城区</a></li> </ul> </div> <div class="btn-group" role="toolbar"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="false" aria-expanded="false">街道<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">莫干山路</a></li> <li class="disabled"><a href="#">宁波路</a></li> <li><a href="#">崂山东路</a></li> <li role="separator" class="divider"></li> <li><a href="#" onclick="window.close()">五马街</a></li> </ul> </div> </div> <!-- 按钮分裂式下拉菜单--> <div class="btn-group dropup"> <div class="btn-group"> <button type="button" class="btn btn-warning">省份</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="false" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">浙江</a></li> <li class="disabled"><a href="#">江苏</a></li> <li><a href="#">广东</a></li> <li role="separator" class="divider"></li> <li><a href="#" onclick="window.close()">山东</a></li> </ul> </div> <div class="btn-group" role="toolbar"> <button type="button" class="btn btn-warning">城市</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="false" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">杭州</a></li> <li class="disabled"><a href="#">宁波</a></li> <li><a href="#">青岛</a></li> <li role="separator" class="divider"></li> <li><a href="#" onclick="window.close()">温州</a></li> </ul> </div> <div class="btn-group" role="toolbar"> <button type="button" class="btn btn-warning">区域</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="false" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">西湖区</a></li> <li class="disabled"><a href="#">海曙区</a></li> <li><a href="#">崂山区</a></li> <li role="separator" class="divider"></li> <li><a href="#" onclick="window.close()">鹿城区</a></li> </ul> </div> <div class="btn-group" role="toolbar"> <button type="button" class="btn btn-warning">街道</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">莫干山路</a></li> <li class="disabled"><a href="#">宁波路</a></li> <li><a href="#">崂山东路</a></li> <li role="separator" class="divider"></li> <li><a href="#" onclick="window.close()">五马街</a></li> </ul> </div> </div> </div> </div> <!-- 顺序载入jquery库并且加载bootstrap压缩js库 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>阅读更多
相关文章推荐
- 毕设中巩固的技术(三)Bootstrap常用组件之二
- Bootstrap基本组件学习笔记之导航(10)
- Bootstrap学习总结笔记(15)-- 基本组件之进度条
- JS组件系列——Bootstrap Select2组件使用小结
- bootstrap输入框和导航组件
- Bootstrap-导航栏组件
- bootstrap 导航条 组件排列
- 【bootstrap组件】几个常用的好用bs组件
- 12款优秀的 Twitter Bootstrap 组件和工具
- Bootstrap CSS组件之输入框组
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面
- Bootstrap组件介绍
- 使用 Bootstrap Typeahead 组件
- Bootstrap fileinput文件上传组件使用详解
- JS组件Bootstrap实现下拉菜单效果代码
- 详解Bootstrap表单组件
- Bootstrap 常用组件汇总
- Bootstrap日期和时间表单组件使用方法
- Bootstrap入门(十八)组件12:徽章与巨幕
- Bootstrap入门(二十一)组件15:警告框