Bootstrap<段落>

最新推荐文章于 2023-10-07 17:42:21 发布
最新推荐文章于 2023-10-07 17:42:21 发布
阅读量639 收藏 2
点赞数
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Andy_java_/article/details/53098892
版权

段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。


body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;

}

“.lead”对应的样式如下：

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型浏览器字体稍大*/
.lead {
font-size: 21px;
  }
}

除此之外，Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。

b,strong {
  font-weight: bold; /*文本加粗*/


small,.small {
  font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差不多12px*/
}
 

可以通过使用标签<em>或<i>来实现。
例如，下面的代码使用了<em>和<i>标签定义了强调文本：
<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>

 

 

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
font-size:14px;
}
p {
line-height: 2;
color: #900;
}
</style>

<style>
@media (min-width: 768px) {/*大中型浏览器字体稍大*/
.lead {
color: #159;
  }
}
small {
  color:#999;
}
</style>

<style>
strong,span {
color: #490;
}
</style>

<meta charset="utf-8">
<title>段落（正文文本）</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
<p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>

<p>Bootstrap<small>&nbsp&nbsp&nbsp&nbsp&nbsp前段框架</small></p>
<!--下面是代码任务部分-->

<div>我在学习<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的所有知识。</div><br>

<span>我是普通文本,我的样子长成这样我是普通文本，我的样子长成这样我是普通文本</span>
<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>
<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------

在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

 
 
  • .text-muted：提示，使用浅灰色（#999）
  • .text-primary：主要，使用蓝色（#428bca）
  • .text-success：成功，使用浅绿色(#3c763d)
  • .text-info：通知信息，使用浅蓝色（#31708f）
  • .text-warning：警告，使用黄色（#8a6d3b）
  • .text-danger：危险，使用褐色（#a94442）
.text-muted {
color: #999;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}


<!DOCTYPE HTML>
<html>
<head>
<style>
.text-muted {
color: #999;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}
</style>
<meta charset="utf-8">
<title>强调相关的类</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>


<body>
<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>
<!--下面是任务部分-->
<p>我是一段危险信息，请用Bootstrap框架中的危险风格显示</p>
</body>
</html>


在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：
  ☑  左对齐，取值left
  ☑  居中对齐，取值center
  ☑  右对齐，取值right
  ☑  两端对齐，取值justify
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
  ☑   .text-left：左对齐
  ☑   .text-center：居中对齐
  ☑   .text-right：右对齐
  ☑   .text-justify：两端对齐
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

例如下面的四行代码，分别定义文本的四种不同的对齐风格：
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>


<!DOCTYPE HTML>
<html>
<head>
<style>
    .text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
</style>
<meta charset="utf-8">
<title>文本对齐风格</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>
</body>
</html>


                

        

        

    




    

      

        

            

              
                
                  Andy_java_
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
BootStrap

				
			

			

				

					LittleBoyss的博客
				

				

					08-08
					
					486
					
				

			

		

		

			
				
Bootstrap 是一套现成的 CSS 样式集合 HTML、CSS 和 JS 框架，用于开发响应式布局、
移动设备优先的 WEB 项目
布局容器
1、.container 类用于固定宽度并支持响应式布局的容器。

…

2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

…
栅格网格系统
网格系统必须使用到 css
container、row...

			
		

	



                

              
                



	

		

			

				
					
Bootstrap

				
			

			

				

					weixin_45800240的博客
				

				

					11-23
					
					435
					
				

			

		

		

			
				
Bootstrap总结什么是Bootstrap新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
什么是Boots...

			
		

	



                


  
              

                


	

		

			

				
					
bootstrap 段落和强调

				
			

			

				

					chenfujian87的专栏
				

				

					12-08
					
					232
					
				

			

		

		

			
				
段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：1、全局文本字号为14px(font-size)。2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。3、颜色为深灰色（#333）；4、字体为"Helvetica...

			
		

	





	

		

			

				
					
Bootstrap入门之段落、列表和表格

				
			

			

				

					yingzizizizizizzz的专栏
				

				

					03-22
					
					686
					
				

			

		

		

			
				
什么是BootStrap？
简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。

基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应

式设计，12列格网，样式向导文档。

自定义JQuery插件，完整的类库，基于Less等。


下面是bootstrap应用方法的简单介绍。
标题h1，

			
		

	



		

			
		



	

		

			

				
					
Bootstrap-段落和文本

				
			

			

				

					lhh_12345的博客
				

				

					11-15
					
					4118
					
				

			

		

		

			
				
1、设置了全局的文本样式，如下：
源码：

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
} 这几个属性均为继承属性，故所有文本都是这些样式效果，

			
		

	





	

		

			

				
					
95后带你学bootstrap——段落及文本效果

				
			

			

				

					PrinceMe1的博客
				

				

					10-19
					
					867
					
				

			

		

		

			
				
一、段落
段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：
1、全局文本字号为14px(font-size)。
2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。
3、颜色为深灰色（#333）；
4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-fami

			
		

	





	

		

			

				
					
Bootstrap来写个好看的文本内容

				
			

			

				

					Jenis57的博客
				

				

					03-04
					
					249
					
				

			

		

		

			
				
几种文本标头摆放方式

			
		

	





	

		

			

				
					
 请用bootstrap来将图片和文本对齐<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>学院官网</title> 		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" /> 		<script src="../js/jquery.slim.min.js"></script> 		<script src="../js/bootstrap.bu

				
			

			

				

					05-31
				

			

		

		

			
				
 <h2>Your Title</h2>  <p>Your text description</p>  </div> </div> ```  解释一下代码：  - `row` 是 Bootstrap 中用来创建网格布局的基本元素，表示一行； - `col-md-4` 表示在中等屏幕尺寸下占据 4 个网格，即 ...

			
		

	





	

		

			

				
					
Bootstrap v3 学习笔记

				
			

			

				

					Pulse的博客
				

				

					10-27
					
					576
					
				

			

		

		

			
				
文章目录Bootstrap基础模板布局容器栅格系统简介栅格参数列偏移列排序列嵌套常用样式排版标题段落强调对齐效果列表
Bootstrap基础模板
要在引用bootstrap.js之前引用jquery.js
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&g

			
		

	





	

		

			

				
					
Bootstrap学习笔记——排版

				
			

			

				

					gengfu_php的博客
				

				

					10-02
					
					772
					
				

			

		

		

			
				
以下内容的开始均是<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>%name%</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body></b

			
		

	





	

		

			

				
					
Bootstrap_02_全局CSS之排版、代码、表格

				
			

			

				

					weixin_67780833的博客
				

				

					04-30
					
					71
					
				

			

		

		

			
				
​
排版
页面主体
Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式

段落突出：通过.lead类可以让段落突出显示，我们来看演示代码:

<div class="container">

<p>卓越人生</p>

<p class="lead">从卓景开始</p>

<p>走向人生巅峰</p>

</div>

效果看的出，从卓景开始 几个字 变大了。这个就是段落突出显

			
		

	





	

		

			

				
					
Bootstrap对段落和文本的设置(与段落-和文本相关的类)

					
最新发布

				
			

			

				

					昊虹AI笔记
				

				

					10-07
					
					681
					
				

			

		

		

			
				
Bootstrap对段落和文本的设置(与段落-和文本相关的类)

			
		

	





	

		

			

				
					
Bootstrap——排版（标题、段落、强调、缩略语、引用）

				
			

			

				

					m0_69034993的博客
				

				

					10-09
					
					1715
					
				

			

		

		

			
				
HTML5定义了若干个标签强调的标签，有、、、、、、等，在Bootstrap4中同样也可以使用，用来为元素添加强调样式。（3）固定不同级别标题字体大小，一级为2.5rem，二级为2rem，三级为1.75rem，四级为1.5rem，五级为1.25rem，六级为1rem。和都可以实现下画线效果，但是前者通常与一起使用。和都可以实现删除效果，但是更具有语义化，能更形象的描述删除意思。

			
		

	





	

		

			

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

				
			

			

				

					aqzengkuasheng的博客
				

				

					02-19
					
					2151
					
				

			

		

		

			
				
标题和段落
 常用样式
 常用样式
    1.标题
	  bootStrap对h1~h6的标题效果进行了覆盖
	  提供了对应的类名，为非标题元素提供了样式 .h1~.h6
	  副标题提供了samll标签或者	.samll类名
	  
	2.段落
	 >通过.lead来突出强调内容
	 <small>小号字
	 <b>或<strong>加粗
	 <i><em>:斜体
	 
	3.强调
	 定义了一套类名，这里称其为强调类名，这些强调类都是

			
		

	





	

		

			

				
					
Bootstrap 排版强调

				
			

			

				

					歪脖先生的博客
				

				

					03-05
					
					783
					
				

			

		

		

			
				
强调想要强调某个段落的文本，可以为它加上 class="lead" 让它突出显示，这会使段落文本稍稍变大、变粗，行高也被显著放大。如：&lt;p class="lead"&gt;Vivamus sagittis lacus vel augue ….&lt;/p&gt;效果如图 3‑3所示：图3-3  强调段落HTML中的 &lt;small&gt; 标签用来标识不需要强调的文本，对于不需要强调的行...

			
		

	





	

		

			

				
					
Bootstrap    排版样式

				
			

			

				

					不要皱眉
				

				

					03-21
					
					4581
					
				

			

		

		

			
				
页面排版1.页面主体Bootstrap将全局：
font-size 设置为14px;
line-height 设置为1.428（20px）;
p标签  设置为1/2行高（10px）;
创建包含段落突出的文本： 
添加 class=”lead”，得到更大更粗、行高更高的文本。<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"

			
		

	





	

		

			

				
					
响应式前端框架Bootstrap系列（3）段落、文字相关

				
			

			

				

					@黄小泽的个人博客
				

				

					01-11
					
					1599
					
				

			

		

		

			
				
本篇主要分享关于bs中段落、文本的组件样式，是一些较简单的样式实现。
段落元素用表示，较常用与段落元素样式有：文字颜色、背景颜色和对齐方式。
文字颜色样式主要有以下6种：
.text-muted：减弱
.text-primary：主要
.text-success：成功
.text-info：信息
.text-warning：警告
.text-danger：危险
演示代码：



			
		

	





	

		

			

				
					
Bootstrap排版与段落

				
			

			

				

					Candx2的博客
				

				

					02-05
					
					730
					
				

			

		

		

			
				
内联子标题
添加或者添加.small class
实例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关闭按钮</title>
    <link href="

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值