Bootstrap 常用标签与样式（bootstrap 标签页）

25-02-24 12

这篇文章主要围绕Bootstrap常用标签与样式和bootstrap标签页展开，旨在为您提供一份详细的参考资料。我们将全面介绍Bootstrap常用标签与样式的优缺点，解答bootstrap标签页的相

这篇文章主要围绕Bootstrap 常用标签与样式和bootstrap 标签页展开，旨在为您提供一份详细的参考资料。我们将全面介绍Bootstrap 常用标签与样式的优缺点，解答bootstrap 标签页的相关问题，同时也会为您带来2.Bootstrap常用样式、bootstrap + bootstrap-table + jquery + bootstrap-paginator、Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式、Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结的实用方法。

本文目录一览：

Bootstrap 常用标签与样式（bootstrap 标签页）
2.Bootstrap常用样式
bootstrap + bootstrap-table + jquery + bootstrap-paginator
Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

Bootstrap 常用标签与样式（bootstrap 标签页）

总结

以上是小编为你收集整理的Bootstrap 常用标签与样式全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

2.Bootstrap常用样式

1.标题 Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签 <h1> ~ <h6> ，只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，为了让非标题元素和标题使用相同的样式，还特意定义了 .h1 ~ .h6 六个类名。同时后面可以紧跟着一行小的标题 <small></small> 或使用 .small 2.段落

段落是排版中的另一个重要元素之一。
通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理)。可以使用以下标签给文本做突出样式处理。

<small> ：小号字
<b><strong>：加粗
<i><em>: 斜体

3.强调定义了一套类名，这里称其为强调类名，这些强调嘞都是通过颜色来表示强调，具体说明如下：

.text-muted：提示，使用浅灰色(#999)
.text.primary ：主要，使用蓝色(#428bca)
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色(#31708f)
text-warning：警告，使用黄色(#8a6d3n)
text-danger：危险，使用褐色(#a94442)

4.对齐效果　　在CSS中常常使用text-align 来实现文本的对齐风格的设置。　　其中主要有4种风格　　 left 左对齐　　 right 右对齐　　 center 居中对齐　　 justify 两端对齐　　Bootstrap 中通过定义四个类名来控制文本的对齐风格　　 text-left 左对齐　　 text-right 右对齐　　 text-center 居中对齐　　 text-justify 两端对齐 5.列表

无序列表（ul）有序列表（ol）

　　移除了默认的 list-style 样式，也就是去掉了原无序列表前面的点 (去掉项目符号(编号)) 　　给列表添加，把垂直列表换成水平列表，而且去掉项目符号(编号)，将所有元素放置于同一行。也可以说内联列表就是为了制作水平导航而生的。给列表添加，把垂直列表换成水平列表，而且去掉项目符号(编号)，将所有元素放置于同一行。也可以说内联列表就是为了制作水平导航而生的。

自定义列表（dl <dt><dd>）

　　　　在原有的基础加入了一些样式，使用样式制作水平定义列表，当标题宽度超过 160px 时，将会显示三个省略号。 6.代码　　一般在个人博客上使用的较为频繁，用于显示代码的风格。在 Bootstrap 主要提供了三种代码风格：

使用<code></code> 来显示单行内联代码
使用<pre></pre> 来显示多行块代码
样式pre-scrollable(height，max-height 高度固定为340px，超过则存在滚动条)
使用<kbd></kbd> 来显示键盘快捷键
显示htmL标签的代码需要适应字符实体，小于号(<）要使用硬编码“⁢”来替代，大于号(>)使用">”来替代

7.表格　　：基础表格

table-striped	斑马线表格
table-bordered	带边框的表格
table-hover	鼠标悬停高亮的表格
table-condensed	紧凑型表格，单元格没内距或者内距较其他表格的内距小

tr、th、td样式

active	将悬停的颜色应用在行或者单元格上
success	表示成功的操作
info	表示信息变化的操作
warning	表示一个警告的操作
danger	表示一个危险的操作

7.表单　　文本框和下拉框

表单元素的样式下拉选择框select多个选择设置multiple="multuple"
：表单控件较大
：表单控件较小

　　单选框和复选框

垂直显示(给input标签加)：https://www.jb51.cc/tag/dio/" target="_blank">dio"
水平显示(给label标签加)：https://www.jb51.cc/tag/dio/" target="_blank">dio-inline"
垂直显示(给div标签加)：https://www.jb51.cc/tag/Box/" target="_blank">Box"
水平显示(给div标签加)：https://www.jb51.cc/tag/Box/" target="_blank">Box-inline"

　　按钮基础样式(给button标签加)：

默认样式Default
首选项Primary
成功Success
一般信息Info
警告Warning
危险Danger
链接Link

多标签支持：使用 a div input 等制作按钮注意：虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。我们总结的最佳实践是：强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

设置按钮大小

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

大按钮
小按钮
超小按钮

　　为 <button> 元素添加 disabled="disabled" 属性，使其表现出禁用状态，样式添加disable看起来被禁用。　　表单布局　　　　基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：　　　　向父元素<form> 元素添加 role="form" 　　　　把标签和控件放在一个带有的<div> 中。这是获取最佳间距所必需的　　　　向所有的文本元素 <input> 、<textarea> 、select 添加

　　　　内联表单（水平布局）, 它的所有元素是内联的，向左对齐的，标签是并排的，向 <form> 标签添加

8.缩略图　　字体图标

在我们下载的 Bootstrap 加压文件中有 fonts 文件夹，里面就是我们的字体图标
只需将 fonts 文件夹复制到我们的项目红，我们就可以使用字体图标了
字体图标类名地址查看，需要时去复制即可：https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

　　<span> 字体图标 </span>

缩略图的使用

大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式
使用 Bootstrap 创建缩略图的步骤如下：
在图像周围添加带有的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。

<body> <div> <div> <a href="#"> <img src="img/timg.jpg" alt="通用的占位符缩略图"> </a> </div> </div> </body>

自定义内容

现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
把带有的 <a> 标签改为 <div>。
在该 <div>内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

面板

面板组件用于把 DOM 组件插入到一个盒子中创建一个基本的面板，只需要向 <div> 元素添加即可默认的 .panel 组件所做的只是设置基本的边框 border 和內补 padding 来包含内容

<div> <div> 这是一个基本的面板 </div> </div>

给盒子添加 https://www.jb51.cc/tag/heading/" target="_blank">heading" 可以很简单地向面板添加标题。给盒子添加可以向面板添加主题内容

<div> <divhttps://www.jb51.cc/tag/heading/" target="_blank">heading"> <h2>明星合集</h2> </div> <div> <div> <div> <img src="img/timg.jpg" alt="..."> <h3>高圆圆</h3> <p>出生于北京市，中国内地影视女演员、模特。</p> <button> <span></span>喜欢</button> <button> <span></span>评论 </button> </div> </div> </div> </div>

总结

以上是小编为你收集整理的2.Bootstrap常用样式全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

原文地址：https://www.cnblogs.com/BingBing-Deng/p/15619102.html

bootstrap + bootstrap-table + jquery + bootstrap-paginator

http://127.0.0.1:8848/pangBo/index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		 crossorigin="anonymous">
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
		 crossorigin="anonymous"></script>
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
		<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
		<script src="js/bootstrap-paginator.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div>
			<formrole="search">
				<div>
					<div>
						<div>
							<label>客户编号: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
						<div>
							<label>客户姓名: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
						<div>
							<label>手机号码: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
					</div>
					<div>
						<div>
							<label>客户编号: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
						<div>
							<label>客户编号: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
						<div>
							<label>客户编号: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
					</div>
					<div>
						<button type="submit">查询</button>
					</div>
				</div>
			</form>
		</div>
		<div>
			<divrole="group" aria-label="...">
				<button type="button" id="btn-one">可撤单</button>
				<button type="button" id="btn-two">已撤单</button>
			</div>
		</div>
		<div id="table-one">
			<table id="table"></table>
			<div>
				<div id="example">
					<ul id="pageLimit"></ul>
				</div>
			</div>
		</div>
		<div id="table-two">
			<table id="table-ta-one"></table>
			<div>
				<div id="example-two">
					<ul id="pageLimit-two"></ul>
				</div>
			</div>
		</div>
		<divid="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div>
				<div>
					<div>
						<button type="button"data-dismiss="modal" aria-hidden="true">&times;</button>
						<divid="myModalLabel">请输入登录密码:</div>
					</div>
					<div>
						<div>
							<input id="input-text" type="text" value=""placeholder="">
						</div>
						<button type="button" id="btn-ok">确定撤单</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	function operateFormatter(value, row, index) {
		return [
			''<button type="button"data-toggle="modal" data-target="#myModal">撤单</button>''
		].join('''');
	}
	window.operateEvents = {
		''click .RoleOfdelete'': function(e, value, row, index) {
			console.log(''kkk'');
		}
	};
	$(''#table'').bootstrapTable({
		url: '''', //请求后台的URL（*）
		method: ''GET'', //请求方式（*）
		// toolbar: ''#toolbar'', //工具按钮用哪个容器
		cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		pagination: false, //是否显示分页（*）
		// pageSize: 10, //每页的记录行数（*）
		// pageNumber: 1, //初始化加载第一页，默认第一页,并记录
		// sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
		uniqueId: "id", //每一行的唯一标识，一般为主键列
		columns: [{
				field: ''id'',
				align: ''center'',
				title: ''交易合同号''
			},
			{
				field: ''ida'',
				align: ''center'',
				title: ''客户编号''
			},
			{
				field: ''idb'',
				align: ''center'',
				title: ''客户姓名''
			},
			{
				field: ''idc'',
				align: ''center'',
				title: ''手机号码''
			},
			{
				field: ''idd'',
				align: ''center'',
				title: ''证件号码''
			},
			{
				field: ''ide'',
				align: ''center'',
				title: ''产品代码''
			},
			{
				field: ''idf'',
				align: ''center'',
				title: ''产品名称''
			},
			{
				field: ''idg'',
				align: ''center'',
				title: ''购买金额''
			},
			{
				field: ''idh'',
				align: ''center'',
				title: ''交易时间''
			},
			{
				field: ''idi'',
				align: ''center'',
				title: ''撤单'',
				events: operateEvents,
				formatter: operateFormatter
			},
		],
		data: [{
				id: 1
			},
			{
				id: 1
			},
			{
				id: 1
			}
		],
		onLoadError: function() {
			showTips("数据加载失败！");
		},

	});
	$(''#table-ta-one'').bootstrapTable({
		url: '''', //请求后台的URL（*）
		method: ''GET'', //请求方式（*）
		// toolbar: ''#toolbar'', //工具按钮用哪个容器
		cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		pagination: false, //是否显示分页（*）
		// pageSize: 10, //每页的记录行数（*）
		// pageNumber: 1, //初始化加载第一页，默认第一页,并记录
		// sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
		uniqueId: "id", //每一行的唯一标识，一般为主键列
		columns: [{
				field: ''id'',
				align: ''center'',
				title: ''交易合同号''
			},
			{
				field: ''ida'',
				align: ''center'',
				title: ''客户编号''
			},
			{
				field: ''idb'',
				align: ''center'',
				title: ''客户姓名''
			},
			{
				field: ''idc'',
				align: ''center'',
				title: ''手机号码''
			},
			{
				field: ''idd'',
				align: ''center'',
				title: ''证件号码''
			},
			{
				field: ''ide'',
				align: ''center'',
				title: ''产品代码''
			},
			{
				field: ''idf'',
				align: ''center'',
				title: ''产品名称''
			},
			{
				field: ''idg'',
				align: ''center'',
				title: ''购买金额''
			},
			{
				field: ''idh'',
				align: ''center'',
				title: ''交易时间''
			}
		],
		data: [{
				id: 1
			},
			{
				id: 1
			},
			{
				id: 1
			}
		],
		onLoadError: function() {
			showTips("数据加载失败！");
		},

	});
	$(''#btn-one'').click(function() {
		console.log(''kk'');
		$(''#table-one'').show();
		$(''#table-two'').hide();
		$(''#btn-one'').css({
			''background-color'': ''#e6e6e6''
		})
	})
	$(''#btn-two'').click(function() {
		console.log(''kkk'');
		$(''#table-two'').show();
		$(''#table-one'').hide();
		$(''#btn-one'').css({
			''background-color'': ''#FFF''
		})
	})
	$(''#pageLimit'').bootstrapPaginator({
		currentPage: 1, //当前的请求页面。
		totalPages: 100, //一共多少页。
		size: "normal", //应该是页眉的大小。
		bootstrapMajorVersion: 3, //bootstrap的版本要求。
		alignment: "right",
		numberOfPages: 5, //一页列出多少数据。
		itemTexts: function(type, page, current) { //如下的代码是将页眉显示的中文显示我们自定义的中文。
			switch (type) {
				case "first":
					return "首页";
				case "prev":
					return "上一页";
				case "next":
					return "下一页";
				case "last":
					return "末页";
				case "page":
					return page;
			}
		}
	});
	$(''#pageLimit-two'').bootstrapPaginator({
		currentPage: 1, //当前的请求页面。
		totalPages: 100, //一共多少页。
		size: "normal", //应该是页眉的大小。
		bootstrapMajorVersion: 3, //bootstrap的版本要求。
		alignment: "right",
		numberOfPages: 5, //一页列出多少数据。
		itemTexts: function(type, page, current) { //如下的代码是将页眉显示的中文显示我们自定义的中文。
			switch (type) {
				case "first":
					return "首页";
				case "prev":
					return "上一页";
				case "next":
					return "下一页";
				case "last":
					return "末页";
				case "page":
					return page;
			}
		}
	});
	$(''#btn-ok'').click(function() {
		var inputContent = $(''#input-text'').val();
		if (inputContent == '''') {
			alert(''密码不能为空 !'');
		}
		console.log(inputContent);
	})
</script>

Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式