bootstrap标题效果

1.示例效果图如下

2.代码实现如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>标题</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">
</head>
<body>
	<!-- 标签标题 -->
	<h1>I‘m h1</h1>
	<h2>I‘m h2</h2>
	<h3>I‘m h3</h3>
	<h4>I‘m h4</h4>
	<h5>I‘m h5</h5>
	<h6>I‘m h6</h6>

	<!-- 通过类名实现标题效果 -->
	<span class="h1">.h1</span>
	<span class="h2">.h2</span>
	<span class="h3">.h3</span>
	<span class="h4">.h4</span>
	<span class="h6">.h5</span>
	<span class="h6">.h6</span>

	<!-- 大标题中嵌套小标题 -->
	<h1>大h1标题<small>小h1标题</small></h1>
	<h2>大h2标题<small>小h2标题</small></h2>
	<h3>大h3标题<small>小h3标题</small></h3>
	<h4>大h4标题<small>小h4标题</small></h4>
	<h5>大h5标题<small>小h5标题</small></h5>
	<h6>大h6标题<small>小h6标题</small></h6>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script 
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
	crossorigin="anonymous"></script>
</body>
</html>
时间： 2024-10-25 17:58:04

bootstrap标题效果的相关文章

炫酷CSS3鼠标hover图片缩放和标题效果

这是一款使用纯CSS3制作的效果非常炫酷的鼠标滑过图片缩放和标题效果.该CSS3图片效果中图片的边框被制作为不停动画的护栏效果,当用鼠标滑过图片时,图片会有非常炫酷的动画效果. CSS3 animations是一个非常神奇的技术,相比于javascript和flash,它只用少量的代码就可以制作出平滑的动画效果.现在,所有的现代浏览器,包括IE9都支持CSS3 transitions 和 animations. 在线演示:http://www.htmleaf.com/Demo/201502081

bootstrap教程（一）———bootstrap标题（一）

本文为H5EDU机构官方的HTML5培训教程 bootstrap教程(一). 我们首先要下载bootstrap的框架文件,放到我们的项目目录当中.然后将bootstrap框架当中的bootstrap.css文件引入到项目当中.之后我们可以看,在bootstrap当中的标题与我们没用使用框架的文件是有不同之处的.最明显的是文字变细. <link rel="stylesheet" href="boostrap.css"> <!--bootstrap中的

bootstrap 手风琴效果

前端大牛:冯鲁哲  1033850519  惩戒各种web开发业务   欢迎洽谈-------鲁大师 <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>按钮插件--按钮状态切换</title><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/boot

bootstrap实例效果

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

bootstrap文本效果

1.效果图如下所示 2.代码实现如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>文本</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

Bootstrap不同级别标题

Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: 通过比较可以发现,Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都是10px. 2.所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本

Bootstrap（一）标题

Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都是10px.2.所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体.3.固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px. 标题的具体运用非常简单,和我们平时运用是一样的,使用<h1>~&

修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载)

软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPager 是个不错的选择.请访问http://www.webdiyer.com/mvcpager/ 由于自带的分页样式不能和项目整体风格兼容,所以我们准备改写源代码,使其能够使用Bootstrap 的分页样式. 先来查看两种分页的html代码 Bootstrap 样式: 1 <ul class="pagination"> 2 <li class="disabled"><

Bootstrap_排版_标题

Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: <!--Bootstrap中的标题--> <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <h3>Bootstrap标题三</h3> <h4>Bootst