bootstrap学习总结-05 常用标签3
1 单选框，多选框
1）单选框
单选框（radio）用于从多个选项中只选择一个。设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head> <body>
<div class="container">
<h1 class="page-header">单选按钮</h1> <div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
选项1
</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
选项2
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="male" id="optionsRadios2" value="male" disabled>
选项3默认不可选
</label>
</div>
</div>
</body> </html>
2）多选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head> <body>
<div class="container">
<h1 class="page-header">复选框</h1> <div class="checkbox">
<label>
<input type="checkbox" value="">
选择1
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
选择2
</label>
</div>
</body>
</html>
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
选项1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
选项2
</label>
<label class="radio-inline">
<input type="radio" name="male" id="optionsRadios2" value="male" disabled>
选项3默认不可选
</label>
<hr>
<label class="checkbox-inline">
<input type="checkbox" value="">
选择1
</label>
<label class="checkbox-inline">
<input type="checkbox" value="" disabled>
选择2
</label>
2 下拉列表
使用默认选项或添加 multiple 属性可以同时显示多个选项。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head> <body>
<div class="container">
<h1 class="page-header">选择列表</h1>
<select class="form-control">
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<hr>
<select multiple class="form-control">
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</body> </html>
静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</body>
</html>
被禁用的输入框
为输入框设置 disabled 属性可以防止用户输入，并能对外观做一些修改，使其更直观。
<div class="container">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</div>
只读输入框
为输入框设置 readonly 属性可以禁止用户输入，并且输入框的样式也是禁用状态。
<div class="container">
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
</div>
3 按钮
1）普通按钮
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head> <body>
<div class="container">
<h1 class="page-header">按钮</h1>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
</div>
</body> </html>
使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。
<div class="container">
<h1 class="page-header">按钮</h1>
<!-- Standard button -->
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
</div>
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
<div class="container">
<h1 class="page-header">按钮</h1>
<!-- Standard 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>
</div>
使用链接（<a>）元素创建按钮
<a href="#" class="btn btn-primary btn-lg" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg" role="button">Link</a>
是它不可用，可为基于 <a> 元素创建的按钮添加 .disabled 类。
2）按钮组
通过按钮组容器把一组按钮放在同一行里
<div class="container">
<h1 class="page-header">按钮组</h1> <div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div> </div>
只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了。
<div class="container">
<h1 class="page-header">按钮组</h1> <div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div> <div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div> <div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div> </div>
3)按钮工具栏
把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。
<div class="container">
<h1 class="page-header">按钮组</h1>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group ">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div> <div class="btn-group ">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div> </div>
4 按钮组
用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
<div class="container">
<h1 class="page-header">下拉菜单</h1> <div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Something else here</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div> </div>
5 导航菜单
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。注意 .nav-tabs 类依赖 .nav 基类。
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#">Home</a>
</li>
<li role="presentation">
<a href="#">Profile</a>
</li>
<li role="presentation">
<a href="#">Messages</a>
</li>
</ul> </div>
胶囊式标签页
HTML 标记相同，但使用 .nav-pills 类：
<div class="container">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">
<a href="#">Home</a>
</li>
<li role="presentation">
<a href="#">Profile</a>
</li>
<li role="presentation">
<a href="#">Messages</a>
</li>
</ul>
</div>
带有下拉页的导航菜单
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#">Home</a>
</li>
<li role="presentation">
<a href="#">Profile</a>
</li>
<li role="presentation">
<a href="#">Messages</a>
</li> <li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Something else here</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
6 路径导航
在一个带有层次的导航结构中标明当前页面的位置。
<div class="container">
<ol class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Library</a>
</li>
<li class="active">Data</li>
</ol> </div>
7 分页
Bootstrap为网站提供带有展示页码的分页组件
<div class="container">
<nav>
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</nav> </div>
8 警告框
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。
<div class="container">
<div class="alert alert-success" role="alert">成功消息提示</div>
<div class="alert alert-info" role="alert">普通消息提示</div>
<div class="alert alert-warning" role="alert">警告消息提示</div>
<div class="alert alert-danger" role="alert">危险消息提示</div>
</div>
显示效果如下图所示：
可关闭的警告框
为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。
<div class="container">
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
测试告警消息！
</div> </div>
务必给 <button> 元素添加 data-dismiss="alert" 属性。
9 缩率图
通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/phone.jpg" alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/phone.jpg" alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/phone.jpg" alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/phone.jpg" alt="...">
</a>
</div>
</div>
</div>
参考资料：
http://v3.bootcss.com/css/#buttons
bootstrap学习总结-05 常用标签3的更多相关文章
- bootstrap学习总结-03 常用标签1
1 显示段落 在HTML中,段落使用p标签包起来,重要的文字使用strong标签,em标签.<em> 标签告诉浏览器把其中的文本表示为强调的内容.对于所有浏览器来说,这意味着要把这段文字用 ...
- bootstrap学习总结-04 常用标签2
1 表格 Bootstrap为表格设计了漂亮的样式. 1)表格基本实例 任意 <table> 标签添加 .table. <table class="table"& ...
- JavaWeb学习之JSP常用标签、EL表达式的运算符、JSTL标签库（6）
1.JSP常用标签 * 只要支持JSP文件,常用标签有可以直接使用 * 格式: jsp:xxxx * jsp:forward ,完成jsp页面的转发 * page属性:转发的地址 <% requ ...
- 2019-9-19：渗透测试，基础学习，html常用标签，笔记
HTML常用标签<br>:换行<meta charset="utf-8">:编码标签<script type="路径">:插 ...
- html学习第一弹の常用标签的归类
HTML初步学习: 行内元素:只占据他对应标签的边框所包含的空间,默认横向排布. 块级元素:块级元素占据其父元素(容器)的整个空间,因此创建了一个块,通常浏览器会在块级元素前后另起一行,默认竖向排布. ...
- BootStrap学习(4)_分页&标签&缩略图&警告&进度条
一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. .pagination --添加该 class 来在页面上显示分页. .disa ...
- 【html学习整理】常用标签
什么是html 超文本标记语言 html语法规则 所有的命令放到<> 大部分成对存在,以<tag>开始,</tag>结束 网页的基本框架,常用的标记 & ...
- java struts2入门学习--OGNL语言常用符号和常用标签学习
一.OGNL常用符号(接上一篇文章): 1.#号 1)<s:property value="#request.username"/> 作用于struts2的域对象,而不 ...
- jsp学习--JSP运行原理,九大隐式对象和JSP常用标签
一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...
随机推荐
- Java 的世界，我不懂：奇葩的 json 序列化
先上张图,代表我心中的十万头草泥马: 写这么长的代码,头回见数组和单个实体共用同一个 json 节点的! 恐怕只有 java 社区的大牛B 才能做出这等事.. 由 Apache 发布: http:// ...
- C程序中对时间的处理——time库函数详解
包含文件:<sys/time.h> <time.h> 一.在C语言中有time_t, tm, timeval等几种类型的时间 1.time_t time_t实际上是长整数类型, ...
- TF2ZP函数
TF2ZP 中TF是什么意思? Transfer function tf 就是传递函数的意思,简称传函 tf2zp是将传递函数转换为零极点形式的一个转换函数 [Z,P,K] = TF2ZP ...
- 最短判断IE的办法
if(!!-[1,]){ return }; 无意中看到这样一行代码,经查是用来判断IE的代码,非常精简,原理如下: [1,],这是一个数组,IE和标准浏览器对这样一个数组的解析是不一样的 alert ...
- 64-who 简明笔记
显示已登录用户的信息 who [options] who am i who程序显示在本地系统上登录的用户的信息.这些信息包括每个用户的用户名.终端设备.登录时间和相应的远程主机名(如果可应用) 参数 ...
- there is issue about change event of checkbox in the ie8 oe ie7
some people said the change event of checkbox can not trigger in the ie7 or ie8,that's not true. thi ...
- 1018LINUX中crontab的用法
转自http://blog.csdn.net/ethanzhao/article/details/4406017#comments 基本格式 :* * * * * command分 时 日 月 周 命 ...
- 第十五章：输入和输出（I/O）
一:流分类 抽象基类:InputStream和Reader 抽象类不能用于创建模板哦! OutputStream和Writer 方向: 以内存为中心! 输入流(读) 输出流(写) 数据 ...
- 关于insert /*+ append*/ 各种insert插入速度比较
来源于:http://www.cnblogs.com/rootq/archive/2009/02/11/1388043.html SQL> select count(*) from t;COUN ...
- SpringMVC自定义视图 Excel视图和PDF视图
一.自定义视图-Excel视图 1.Maven依赖 引入POI <dependency> <groupId>org.apache.poi</groupId> < ...