bootStrap常用样式：标题和段落、列表、代码、表格

最新推荐文章于 2024-07-05 10:53:36 发布
最新推荐文章于 2024-07-05 10:53:36 发布
阅读量2.1k 收藏 5
点赞数
分类专栏： 前端框架 文章标签： bootstrap html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/123015194
版权

标题和段落

 常用样式
 常用样式
    1.标题
	  bootStrap对h1~h6的标题效果进行了覆盖
	  提供了对应的类名，为非标题元素提供了样式 .h1~.h6
	  副标题提供了samll标签或者	.samll类名
	  
	2.段落
	 >通过.lead来突出强调内容
	 <small>小号字
	 <b>或<strong>加粗
	 <i><em>:斜体
	 
	3.强调
	 定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下：
	 .text-muted：提示，使用浅灰色（#999）
	 .text-primary：主要，使用蓝色（#428bca）
	 .text-success：成功，使用浅绿色(#3c763d)
	 .text-info：通知信息，使用浅蓝色（#31708f）
	 .text-warning：警告，使用黄色（#8a6d3b）
	 .text-danger：危险，使用褐色（#a94442）
	4.对其效果
      方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
	  .text-left：左对齐 .text-center：居中对 齐 .text-right：右对齐 .text-justify：两端对齐。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
	</head>
	<!-- 
	 常用样式
	    1.标题
		  bootStrap对h1~h6的标题效果进行了覆盖
		  提供了对应的类名，为非标题元素提供了样式 .h1~.h6
		  副标题提供了samll标签或者	.samll类名
		  
		2.段落
		 >通过.lead来突出强调内容
		 <small>小号字
		 <b>或<strong>加粗
		 <i><em>:斜体
		 
		3.强调
		 定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下：
		 .text-muted：提示，使用浅灰色（#999）
		 .text-primary：主要，使用蓝色（#428bca）
		 .text-success：成功，使用浅绿色(#3c763d)
		 .text-info：通知信息，使用浅蓝色（#31708f）
		 .text-warning：警告，使用黄色（#8a6d3b）
		 .text-danger：危险，使用褐色（#a94442）
		4.对其效果
          方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
		  .text-left：左对齐 .text-center：居中对 齐 .text-right：右对齐 .text-justify：两端对齐。
	 -->
	<body>
		<h1>标题1<small>副标题1</small></h1>
		<h2>标题2 <span class="small">副标题2</span></h2>
		<h3>标题3</h3>
		<div class="h1">
			你好啊
		</div>
		<hr>
		<p>通过.lead来突出强调内容</p>
		<p class="lead">通过.lead来突出<small>强调（这是通过samll 标签来变小）</small>内容，<b>这样这是通过b标签来变粗</b></p>
		
		<hr >
		<!-- 强调 -->
		</div>
		<div class="text-muted">.text-muted：提示，使用浅灰色（#999）</div>
		<div class="text-primary">.text-primary：主要，使用蓝色（#428bca）</div>
		<div class="text-success">.text-success：成功，使用浅绿色(#3c763d)</div>
		<div class="text-info">.text-info：通知信息，使用浅蓝色（#31708f）</div>
		<div class="text-warning">.text-warning：警告，使用黄色（#8a6d3b）</div>
		<div class="text-danger">.text-danger：危险，使用褐色（#a94442）</div>
		
		<hr>
		<p style="text-align: right;"> (css 里面自带的)方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：</p>
		<p class="text-left"> bootStrap提供的左对其 方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：</p>
		<p class="text-right">bootStrap提供的右对其  方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：</p>
		<p class="text-justify">bootStrap提供的两边对其 方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：</p>
	</body>
</html>

列表

	 在html中，列表结构主要有3种
	 无序列表
	 有序列表
	 定义列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- 
		 在html中，列表结构主要有3种
		 无序列表
		 有序列表
		 定义列表
		 -->
		 <ul>
		 	<li>无序列表1</li>
			<li>无序列表2</li>
		 </ul>
		 <ol>
		 	<li>有序列表1</li>
			<li>有序列表2</li>
		 </ol>
		 <dl><!--自定义列表-->
			 <dt>HTML</dt>
			 <dd>超文本标记语言</dd>
			  <dt>CSS</dt>
			  <dd>样式表语言</dd>
		 </dl>
		 <hr >
		 <!-- bootStrap的去点列表 -->
		 <ul class="list-unstyled">
		 	<li>无序列表1</li>
		 	<li>无序列表2</li>
		 </ul>
		  <!-- bootStrap的内连列表  就是放到一行上面-->
		  <ul class="list-inline">
		  	<li>首页</li>
			<li>java学院</li>
			<li>在线课堂</li>
		  </ul>
		  <!-- 自定义列表 内联列表 长度超过一定的时候，省略-->
		  <dl class="dl-horizontal">
		      <dt>HTML 超文本标记语言</dt>
		      <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>   
		      <dt>测试标题不能超过160px的宽度,否则2个点</dt>
		      <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
		  </dl>
	</body>
</html>

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- 
		 1.列表 
		 在html中，列表结构主要有3种
		 无序列表
		 有序列表
		 定义列表
		 2.代码
		  用<code></code>来显示单行内联代码
		  用<kbd></kbd>来表示快捷键
		  用<pre></pre>来表示多行代码，代码会保留原本的格式包括空格和回车，
		
		 -->
		 <ul>
		 	<li>无序列表1</li>
			<li>无序列表2</li>
		 </ul>
		 <ol>
		 	<li>有序列表1</li>
			<li>有序列表2</li>
		 </ol>
		 <dl>
			 <dt>HTML</dt>
			 <dd>超文本标记语言</dd>
			  <dt>CSS</dt>
			  <dd>样式表语言</dd>
		 </dl>
		 <hr >
		 <!-- bootStrap的去点列表 -->
		 <ul class="list-unstyled">
		 	<li>无序列表1</li>
		 	<li>无序列表2</li>
		 </ul>
		  <!-- bootStrap的内连列表  就是放到一行上面-->
		  <ul class="list-inline">
		  	<li>首页</li>
			<li>java学院</li>
			<li>在线课堂</li>
		  </ul>
		  <!-- 自定义列表 内联列表 长度超过一定的时候，省略-->
		  <dl class="dl-horizontal">
		      <dt>HTML 超文本标记语言</dt>
		      <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>   
		      <dt>测试标题不能超过160px的宽度,否则2个点</dt>
		      <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
		  </dl>
		  
		  
		  <!-- 快捷键 -->
		    <p>使用<kbd>ctrl+s</kbd>保存</p>
			
			
			<!-- 
			 显示html标签的代码需要适应字符实体  
			 小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代
			-->
			<pre>
			 &lt;ul&gt;
			 &lt;li&gt;测试实体符&lt;/li&gt;
			 &lt;/ul&gt;
			</pre>
			
		  <!-- 多行代码 -->
		  <!-- 代码会保留原本的格式，包括空格和回车 -->
		  <pre>
			  public class HelloWorld {
			   public static void main(String[] args){
			   System.out.println("helloworld...");
			   }
			  }
		  </pre>
		  <!-- 显示html代码需要使用 -->
		  <pre>
		  	&lt;h&gt;你好&lt;/h2&gt;
		  </pre>
		  <!--多行代码种 长度超过指定值时，可以添加滚动条 -->
		  
		  <!-- 当高度超过，会存在滚动条 -->
		  <pre class="pre-scrollable">
		   <ol>
		   <li>...........</li>
		   <li>...........</li>
		   <li>...........</li>
		   <li>...........</li>
		   <li>...........</li>
		   <li>...........</li>
		   <li>...........</li>
		    <li>...........</li>
		    <li>...........</li>
		    <li>...........</li>
		    <li>...........</li>
		    <li>...........</li>
		    </ol>
		   </pre>
	</body>
</html>

表格

表格
基础样式 1）.table：基础表格 附加样式
1) .table-striped：斑马线表格
2) .table-bordered：带边框的表格
3) .table-hover：鼠标悬停高亮的表格
4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小

		   <!-- 
		   表格
			基础样式 1）.table：基础表格 附加样式
			1) .table-striped：斑马线表格
			2) .table-bordered：带边框的表格
			3) .table-hover：鼠标悬停高亮的表格
			4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小
			-->
			<table class="table table-bordered table-hover table-striped table-condensed">
			 <tr class="active">
			    <th>JavaSE</th>
			 <th>数据库</th>
			 <th>JavaScript</th>
			 </tr>
			 <tr class="danger">
			    <td>面向对象</td>
			    <td>oracle</td>
			    <td>json</td>
			 </tr>
			 <tr class="success">
			    <td>数组</td>
			 <td>mysql</td>
			 <td>ajax</td>
			 </tr>
			</table>
aqzengkuasheng
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstraptable合并标题_Bootstrap-table 单元格合并 、表头合并
weixin_29928971的博客
01-14 818
1.页面引入js/css@*1、Jquery组件引用*@@*2、bootstrap组件引用*@@*3、bootstrap table组件以及中文包的引用*@2.页面定义一个table3.初始化js文件function initTable() {$('#table').bootstrapTable('destroy');$('#table').bootstrapTable({url: ctx + '...
Bootstrap-标题样式
wendZzoo的博客
12-18 1428
Bootstrap重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px； h4~h6重置后的值都是10px。 所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。 固定不同级别标题字体大小， h1=36px， h2=30px， h3=24px， h4=18px， h5=14px， h6=12p...
修复bootstrap table标题栏和内容无法对齐的bug
最新发布
leptune144的博客
07-05 214
【代码】修复bootstrap table标题栏和下面没对齐的bug。
bootstrap教程（一）———bootstrap标题（一）
avr35764的博客
07-18 233
本文为H5EDU机构官方的HTML5培训教程bootstrap教程(一)。我们首先要下载bootstrap的框架文件，放到我们的项目目录当中。然后将bootstrap框架当中的bootstrap.css文件引入到项目当中。之后我们可以看，在bootstrap当中的标题与我们没用使用框架的文件是有不同之处的。最明显的是文字变细。 <link rel="stylesheet" h...
Bootstrap样式
Maggie~~的博客
05-13 244
1，Bootstrap框架 ----前端开发框架，基于html,css,javaScript开发的简洁前端开发框架。使web开发跟家快捷。 基本文件结构： 编译好的css和js(bootstrap.)文件，还有经过压缩的css和js(bootstrap.min. )文件，css源码映射表（bootstrap.* .map）,还有Glyphicons的图标字体。 注意： 其中css和js文件姐名称可随意改动，fonts文件夹名称不能更改，因为里面源码使用了相对路径。 2，12栅格系统 栅格系统使通过一系列的
Bootstrap的标题类(标题样式h1~h6、small标签、display类)
昊虹AI笔记
09-05 963
使用Bootstrap的标题类(标题样式h1~h6)
Bootstrap_Static:这是一个使用 HTML、CSS 和 Bootstrap 制作的静态网站
07-24
在这个项目中，HTML文件可能包含了网页的各种元素，如标题、段落、链接、图像和表格等。开发者可能使用了语义化标签来提高页面的可读性和搜索引擎优化（SEO）。 **CSS（层叠样式表）** CSS负责网页的样式和布局，使...
Web_HC_ZL_Bootstrap:网页：赫彩中坜Bootstrap
03-27
2. CSS文件：可能包含自定义的CSS代码，用于扩展或修改Bootstrap的默认样式。 3. JavaScript文件：可能包含Bootstrap的JavaScript插件或自定义的交互逻辑。 4. 图像资源：为网页添加视觉元素。 5. 结构文件：如...
html-css-bootstrap-freelancer:引导自由职业者
05-10
它是一种标记语言，通过使用不同的标签来描述页面元素，如标题、段落、图像等。HTML5是当前广泛使用的版本，引入了许多新特性，提高了网页的互动性和多媒体支持。 CSS（Cascading Style Sheets）则是用于控制网页...
scool_bootstrap_site:这是一个使用 Html、CSS 和 Bootstrap 开发的假网页
05-31
...每个标签都有其特定的含义和功能，例如`<head>`用于包含元信息，`<body>`则包含了网页的主要内容。...这个项目对于学习Web开发的初学者来说，是一个很好的实践案例，可以帮助理解Web开发的基本流程和常用工具。
widgets-in-arabic-language-using-bootstrap-5:使用bootstrap 5的阿拉伯语小部件
05-25
卡片内的标题、段落和其他元素也需要相应的RTL处理。 接下来，我们讨论“登录表格”（Login Forms）。在Bootstrap 5中，我们可以使用`.form-control`类创建输入字段，配合`.form-label`为字段添加标签。为了适应...
Bootstrap树型表格和多标题表格
06-23
从bootstrap修改出来的与ext treegrid相似的插件，能当树形和普通多标题插件用，自带行内编辑
Bootstrap——排版（标题、段落、强调、缩略语、引用）
m0_69034993的博客
10-09 1713
HTML5定义了若干个标签强调的标签，有、、、、、、等，在Bootstrap4中同样也可以使用，用来为元素添加强调样式。（3）固定不同级别标题字体大小，一级为2.5rem，二级为2rem，三级为1.75rem，四级为1.5rem，五级为1.25rem，六级为1rem。和都可以实现下画线效果，但是前者通常与一起使用。和都可以实现删除效果，但是更具有语义化，能更形象的描述删除意思。
bootstrap中使用带标题的表格
LucasLi2016的博客
02-14 6478
<fieldset> <legend>标题</legend></fieldset>bootstrap重写了fieldset和其中的legend，变成了”标题”下面一条分割线的样子。 如果想还原的话，加上以下全局设置即可。fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding
Bootstrap 样式速查
kexin_power的博客
09-22 744
http://classfoo.com/ccby/article/KwuGbSY
Bootstrap-标题
lhh_12345的博客
11-14 1231
一、bootstrap和html的写法一样，定义标题都是通过标签的方式，但是bootstrap对样式进行了重置，并且添加了.h1~.h6的类名让不是标题的元素也能应用其样式；       具体规则如下：    可得：1、h1~h3的margin-top和margin-bottom分别为20px和10px；               2、所有标题的行高为1.1，文本的颜色和字体都继承父元
bootstrap-标题
weixin_30684743的博客
04-19 63
1、重置了margin-top和margin-bottom的值，h1到h3重置后margin-top的值都是20px；h4到h6重置后的值都是10px； 2、所有标题的行高都是1.1（也就是font-size的1.1倍），而且文本颜色和字体都是继承父元素的颜色和字体。 3、固定不同级别的标题字体的大小，h1=36px、h2=30px、h3=24px、h4=18px，h5=14px和h...
bootstrap的例子的样式怎么找出来_如何使用Bootstrap ？
weixin_42131618的博客
01-30 955
Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统自带大量组件众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。基本使用流程 1.因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上 2.Bootstrap需要JQuery才能正常工作，...
Bootstrap<标题>
Andy_java_的博客
11-09 573
标题（一） Bootstrap和普通的HTML页面一样，定义标题都是使用标签到,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示： 通过比较可以发现，Bootstrap标题样式进行了以下显著的优化重置： 1、重新设置了margin-top和margin-bottom的值，  h1~h3重置后的值都是20p
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值