Bootstarp入门教程(4) 排版（1）

最新推荐文章于 2020-01-04 21:12:08 发布
最新推荐文章于 2020-01-04 21:12:08 发布
阅读量947 收藏 1
点赞数
分类专栏： Bootstrap 学习教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/18404651
版权

(1)标题：HTML中的所有标题标签，从<h1> 到 <h6> 均可用。

<body>
	<!--容器  -->
	<div class="container">
		<div class="row">
			<h1>h1. Bootstrap heading</h1>
			<h2>h2. Bootstrap heading</h2>
			<h3>h3. Bootstrap heading</h3>
			<h4>h4. Bootstrap heading</h4>
			<h5>h5. Bootstrap heading</h5>
			<h6>h6. Bootstrap heading</h6>
		</div>
	</div>
</body>

（2）页面主体：Bootstrap将全局font-size设置为14px，line-height为1.428。这些属性直接赋给<body>和所有段落元素。另外，<p>（段落）还被设置了等于1/2行高的底部外边距（margin）（即10px）。

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
	<!--容器  -->
	<div class="container">	
		<div class="row">
		   <!--”.lead"凸显文本内容  -->
			<p class="lead"> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
			<br/>
			<p> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
			
		</div>
	</div>
</body>
</html>


(3)强调：使用HTML中用于标注强调的标签，并给他们赋予少许的样式

              小号文本：<small>标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
	<!--容器  -->
	<div class="container">	
		<div class="row">	
		     <small>title</small>
		     <br/>		
			<p class="small"> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
			<br/>
			<p> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
		</div>
	</div>
</body>
</html>


                              着重:通过<strong>强调一段文本

<body>
	<!--容器  -->
	<div class="container">	
		<div class="row">	
		     <strong>title</strong>
		     <br/>		
			<p class="small"> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
			<br/>
			<p> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
		</div>
	</div>
</body>


                                      斜体：通过<em>强调斜体

                                      注意：可选元素（HTML5中定义的<b> 和 <i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示，<i>大部分用于发言、技术短语等情况。）

<body>
	<!--容器  -->
	<div class="container">	
		<div class="row">	
		     <em>title</em>
		     <br/>		
			<p class="small"> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
			<br/>
			<p> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
		</div>
	</div>
</body>


                                           对齐class：通过文本对齐class，可以简单方便的将文字重新对齐。

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
	<!--容器  -->
	<div class="container">
		<div class="row">
			<p class="text-left">文本靠左.</p>
			<p class="text-center">文本居中.</p>
			<p class="text-right">文本靠右.</p>
		</div>
	</div>
</body>
</html>


                       强调class：这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
	<!--容器  -->
	<div class="container">
		<div class="row">
			<p class="text-muted">1111111</p>
			<p class="text-primary">111111111</p>
			<p class="text-success">1111111111</p>
			<p class="text-info">111111111</p>
			<p class="text-warning">11111111</p>
			<p class="text-danger">1111111111</p>
		</div>
	</div>
</body>
</html>




在奋斗的大道
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStarp4（3）
m0_55689351的博客
04-26 629
Bootstrap4 模态框 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗 体可提供信息交互等。 可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。 尺寸类放在 <div>元素的 .modal-dialog 类后 Bootstrap4 提示框 提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。 ...
Flask-Bootstrap安装失败问题解决
pythonniu的博客
07-16 8394
00x1 问题提出 Collecting flask-bootstrap Could not fetch URL https://pypi.python.org/simple/flask-bootstrap/: There was a problem confirming the ssl certificate: [SSL: CERTIFICATE_VERIFY_FAILED] certifica
Flask导包错误
bzd_111的专栏
06-26 5738
flask编译错误 ：错误提示：from flask_bootstrap import Bootstrap ImportError: No module named flask_bootstrap 类似错误的有 from flask_nav import Nav ImportError: No module named flask_nav可以使用更新一下系统包 pip install --upgra
前端学习（309）：bootstrap4之博客练习四
歌谣的博客
01-04 351
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
bootstarp modal自动调整宽度的JS代码
____
07-03 1万+
$('#ajaxPage').modal('show').css({ width: 'auto', 'margin-left': function () { return -($(this).width() / 2);
Bootstrap学习笔记03
敲代码的乔帮主
11-01 802
第三部分：BootStrap组件 第一节：Glyphicons  字体图标 body style="padding: 20px"> div class="btn-toolbar"role="toolbar">   div class="btn-group">     button type="button"class="btn btn-default">span class=
Bootstrap 块级元素内子级块级元素高度一致问题。
ribavnu的专栏
06-09 5604
本问题具有通性，不必限制在bootstrap。 本文参考出处：http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height 粘出来的三种解决方案只是点赞人数最多的那个回复，但是其余的回复仍有很多参考价值，可以参考一下的。 引入boot
bootstrap入门教程
04-16
### Bootstrap入门教程知识点详解 #### 一、Bootstrap简介 Bootstrap是一款非常受欢迎的前端框架，它由Twitter的一群工程师为了提高内部产品的分析与管理能力而创建。最初的目标是为Twitter的产品开发一套易于使用...
Bootstrap入门书籍之（一）排版
09-02
在本文中，我们将深入探讨Bootstrap入门书籍的第一部分：排版。 排版在网页设计中扮演着至关重要的角色，因为它决定了内容的可读性和整体视觉效果。Bootstrap的排版组件旨在提供一致且易于使用的样式，简化了创建...
BootStrap入门教程[汇编].pdf
10-11
BootStrap入门教程 BootStrap 是一套由 Twitter 的工程师创造的前端工具集，用于构建易用、优雅、灵活、可扩展的用户界面和交互接口。BootStrap 的主要特性有友好的学习曲线、卓越的兼容性、响应式设计、12 列格网...
BootStrap入门教程
05-07
Bootstrap框架被应用于许多网站的建设中，这些网站以界面清新、简洁和要素排版利落大方而著称。 Bootstrap的核心特性包括友好的学习曲线、卓越的兼容性、响应式设计、12列格网布局、样式向导文档、自定义JQuery插件...
快速给django admin后台加入bootstrap
热门推荐
专注于互联网架构技术，努力成为一名架构师
03-25 1万+
Installation pip install django-admin-bootstrapped (virtualenv highly suggested)add django_admin_bootstrapped into the INSTALLED_APPS list beforedjango.contrib.adminhave fun! Your INSTALLED_APPS
Bootstarp学习教程（7） 表单
zhouzhiwengang的专栏
01-17 2046
基本案例：“form-control”修饰的、和元素都将被默认设置为width: 100%;表单控件包裹在".form-group"中可以获得最好的排列 Demo --> --> 用户名 <input type="text" class="form-control" id="exampleInput
Bootstarp学习教程（11） 输入框组组件
zhouzhiwengang的专栏
01-18 1315
基本案例：通过在基于文本的输入框前面，后面或是两边加上文字或按钮，可以扩展对表单的控制。用带有.input-group-addon的.input-group，可以给.form-control前面或后面追加元素。 @ <input type="text" class="form-control" placeholder="Username"> <span
Bootstarp入门教程（1）介绍
zhouzhiwengang的专栏
01-17 1202
Bootstarp：                  2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊
Bootstarp入门教程（3）栅格系统
zhouzhiwengang的专栏
01-17 1173
栅格系统简介                           栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理： “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。使用“行（row）”在水平方向创建一组“列（
Bootstarp学习教程（8） 按钮
zhouzhiwengang的专栏
01-17 1057
按钮          选项 默认 主要 成功 信息 警告 危险 链接         尺寸:使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮 默认 主要 成功 信息 警告 危险 链接          通过给按钮添加 "btn-block"可以使其充满父节点100%的宽度，而且按钮也变
Bootstarp入门教程（6） 表格
zhouzhiwengang的专栏
01-17 901
基本案例：为任意标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。 Demo --> --> 第一列 第二列 第三列 第四列 1 2 3
BootStrap入门教程：响应式前端框架解析
“Bootstrap入门教程，共4章，由VentLam创作并采用知识共享许可协议，内容涵盖了BootStrap的基本概念、布局系统、组件和JavaScript插件。” Bootstrap是一款由Twitter的工程师开发的前端框架，旨在提供一套易于使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值