Bootstrap文本对齐风格

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

?  左对齐,取值left

?  居中对齐,取值center

?  右对齐,取值right

?  两端对齐,取值justify

为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格(具体源码查看bootstrap.css文件第488行~第499行):

?   .text-left:左对齐

?   .text-center:居中对齐

?   .text-right:右对齐

?   .text-justify:两端对齐

<!DOCTYPE HTML>
<html>
<head>
<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>
时间: 2024-10-11 05:49:50

Bootstrap文本对齐风格的相关文章

bootstrap 文本对齐风格

Bootstrap通过定义四个类名来控制文本的对齐风格: ?   .text-left:左对齐 ?   .text-center:居中对齐 ?   .text-right:右对齐 ?   .text-justify:两端对齐 P.S.:目前两端对齐在各浏览器下解析各有不同,特别是应用于中文文本的时候.所以项目中慎用. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl

bootstrap笔记之——全局,标题,正文文本,强调,文本对齐

一.全局样式 Bootstrap框架做了一定的变更,不再一味追求归零,而是更注重重置可能产生问题的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,具体说明如下: 移除body的margin声明 设置body的背景色为白色 为排版设置了基本的字体.字号和行高 设置全局链接颜色,且当链接处于悬浮":hover"状态时才会显示下划线样式 二.标题 1.重新设置了margin-top和margin-bottom的值,  h

Bootstrap系列 -- 5. 文本对齐方式

一. 文本对齐样式 .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐 二. 使用方式 <p class="text-left">我居左</p> <p class="text-center">我居中</p> <p class="text-right">我居右</p> <p class=&

bootstrap文本效果

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

css之文本缩进 | 文本对齐 | 上划线 | 下划线 | 删除线 | 首字母大写 | 全部变大写 | 全部变小写

1.文本缩进: 举例: 如果是整个段落缩进: 要实现下面的效果: -40px 2.文本对齐: 举例: 3.文本装饰: 举例: 删除线: 4.文本变形: 举例: 全部变大写: 全部变小写:

Bootstrap两端对齐的导航实例

Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 两端对齐的导航元素</title> <style> .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav:before, .nav:after { display: table;content:

bootstrap学习笔记&lt;八&gt;(bootstrap核心布局风格——栅格系统)

栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的配合响应式布局.在设备宽度不够时栅格系统会自动把所有栅格纵向排列. 栅格系统基本样式:

相关的类代表的颜色和文本对齐方式

.text-muted:提示,使用浅灰色(#999) .text-primary:主要,使用蓝色(#428bca) .text-success:成功,使用浅绿色(#3c763d) .text-info:通知信息,使用浅蓝色(#31708f) .text-warning:警告,使用黄色(#8a6d3b) .text-danger:危险,使用褐色(#a94442) ?   .text-left:左对齐 ?   .text-center:居中对齐 ?   .text-right:右对齐 ?   .te

【css基础】文本对齐,水平对齐,垂直对齐

先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注意的是如果有padding这类的东西在,千万看清楚两边的padding值是否相 同,当你看到文字不在中间的时候,可能就是因为两边的padding值不同,举例说明: <p>我是一段测试文字</p> 如果看过我前面一片做一个简单网页的日志就知道,这个应该放在body标签里面. 放在网页里就