Bootstrap部分好用的功能

文本对齐

在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格:

  • 左对齐:取值left
  • 右对齐:取值right
  • 居中:取值center
  • 两端对齐: 取值justify

BootStrap中通过定义四个类名控制对象对齐风格:

  • 左对齐:.text-left
  • 右对齐:.text-right
  • 居中:.text-center
  • 两端对齐:text-justify

具体源码查看bootstrap.css文件第488行~第499行:

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

示例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文本对齐风格</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/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>
<!--下面是任务部分-->
<p class="text-right">给我加个类,我就向右对齐。</p>


</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容