当前位置： 首页 > news >正文

bootstrap标题效果

news 来源：原创 2024/4/25 6:16:46

1.示例效果图如下

wKioL1kRHBSxuVK9AABl9r1vNis985.png-wh_50


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>


本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1923486

相关文章：

  • nmap的用法
  • java 二叉树 深度优先递归遍历
  • 基于nginx部署app下载服务器
  • itunes Connect 未能创建 App 图标
  • Exchange（2007/2010/2013)共存环境中IMAP和POP的工作方式
  • 第二章 索引
  • 金山词霸PDF文档取词
  • 如何使用OpenSSL自签证书（Self-Sign Certificate）
  • 为什么，博主我要写下这一系列windows实用网络？
  • CentOS系统中出现错误--SSH：connect to host centos-py port 22: Connection refused
  • 笔记本外接显示器切换失败原因
  • 用路由标记过滤路由更新
  • 简单干净的C#方法设计案例：SFCUI.AjaxValue()之三
  • 各版本最新的Visual C++可再发行组件包(Redistributable Package)下载和合集
  • 这样出ORACLE的面试题
  • SegmentFault for Android 3.0 发布
  • .pyc 想到的一些问题
  • JAVA并发编程--1.基础概念
  • Mac 鼠须管 Rime 输入法 安装五笔输入法 教程
  • Netty 框架总结「ChannelHandler 及 EventLoop」
  • React as a UI Runtime(五、列表)
  • Vue源码解析（二）Vue的双向绑定讲解及实现
  • Wamp集成环境 添加PHP的新版本
  • Zepto.js源码学习之二
  • 面试题：给你个id，去拿到name，多叉树遍历
  • 面试遇到的一些题
  • 前端设计模式
  • 问:在指定的JSON数据中（最外层是数组）根据指定条件拿到匹配到的结果
  • 赢得Docker挑战最佳实践
  • 用 vue 组件自定义 v-model， 实现一个 Tab 组件。
  • 最简单的无缝轮播
  • HanLP分词命名实体提取详解
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • ​水经微图Web1.5.0版即将上线
  • #android不同版本废弃api，新api。
  • #define 用法
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • $.ajax中的eval及dataType
  • $jQuery 重写Alert样式方法
  • （03）光刻——半导体电路的绘制
  • （1）(1.9) MSP (version 4.2)
  • （JS基础）String 类型
  • （附源码）ssm学生管理系统 毕业设计 141543
  • (区间dp) (经典例题) 石子合并
  • (使用vite搭建vue3项目（vite + vue3 + vue router + pinia + element plus）)
  • （四）图像的%2线性拉伸
  • （终章）[图像识别]13.OpenCV案例 自定义训练集分类器物体检测
  • .NET Standard、.NET Framework 、.NET Core三者的关系与区别？
  • .NET/MSBuild 中的发布路径在哪里呢？如何在扩展编译的时候修改发布路径中的文件呢？
  • .NET6使用MiniExcel根据数据源横向导出头部标题及数据
  • .Net各种迷惑命名解释
  • .NET企业级应用架构设计系列之技术选型
  • .NET企业级应用架构设计系列之开场白
  • .php文件都打不开,打不开php文件怎么办
  • .sh