Bootstrap3基础 text-right/left/center 设置标题右对齐、左对齐、居中

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Firefox / Chrome
     bootstrap:3.3.7

代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>Demo</title>
	<!-- 引入外部的bootstrap的css文件(压缩版) -->
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<!-- NO.1 先引入jQuery文件(压缩版) -->
	<script src="bootstrap/js/jquery.min.js"></script>
	<!-- NO.2 再引入js文件(压缩版) -->
	<script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <h1 class="text-right">右对齐</h1>
    <h1 class="text-left">左对齐</h1>
    <h1 class="text-center">居中</h1>
</body>
</html>

效果



Bootstrap,优秀的前端开源框架,值得学习。
学习资源:v3.bootcss.com + itcast和itheima视频库 + 清净的心地。如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8280436.html

时间: 2024-11-02 11:02:44

Bootstrap3基础 text-right/left/center 设置标题右对齐、左对齐、居中的相关文章

css3基础 transition 配合position,实现从右往左弹出的效果

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

前端基础-CSS的属性相关设置

一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值 描述   normal 默认值,标准粗细 bord 粗体    * border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold    * inherit 继承父元素字体的粗细值 2.font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜  3.fo

flash编程基础1----文档类路径设置

文档类路径设置 文档类的作用是把flash和as关联起来,我们只要在as中写代码来控制显示对象和程序逻辑.但是经常会碰到一些问题: 无法在类路径中找到该文档类的定义,包名称不能反映此文件的位置.下面我们通过一个例子来解决这个问题. 假如在包com.as3.mytest.eventTest下有两个文件:test.fla,EventTest001.as,我们要把这两个文件关联起来.EventTest001.as的包名默认为com.as3.mytest.eventTest像这样: package co

android 中 actionbar 常用方法。设置标题,隐藏图标等

设置标题: actionBar.setTitle("关于我们"); 使返回箭头出现 actionBar.setDisplayHomeAsUpEnabled(true); 监听返回按钮的 事件 public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == android.R.id.home) { finish(); return true; } return super.onOptionsIte

微信分享到朋友圈,分享给好友设置标题图片描述参数

var imgUrl = "http://xxxxx.com/activity/images/logo.jpg"; var lineLink = window.location.href; var descContent = '来宜人贷参与抢钱活动100%获得10000金币,还可以兑换成现金哦~'; var shareTitle = '来宜人贷 拼人品抢现金'; var appid = 'wx237b223ad5773cf5'; function shareFriend() { Wei

黄聪:Discuz!的SEO优化策略一:如何设置标题 &amp; 如何去掉Powered by Discuz!尾巴

1.如何设置标题 进入 管理中心 -- 全局 -- SEO设置 -- 论坛 -- 标题 ,设置你的网站标题和描述. PS:有人问keywords要不要设置,其实现在keywords对SEO的影响已经微乎其微了,添不添加都可以. 2.去掉Powered by Discuz!尾巴 1)找到  template\default\common 目录下的 header_common.htm 文件,用编辑器打开. 2)查找并替换  - <!--{/if}--> Powered by Discuz! 为 &

Android中设置半个屏幕大小且居中的按钮布局 (layout_weight属性)

先看如下布局 : 上图中,按钮的大小为屏幕的一半,然后居中显示在布局中央,每个人心中都有自己的答案,看看我的方法吧,布局布局xml如下 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_layout&

ios彩票标题按钮(左文字右图片)

1 #import <UIKit/UIKit.h> 2 3 @interface NJTitleButton : UIButton 4 5 @end 6 7 8 #import "NJTitleButton.h" 9 10 @interface NJTitleButton () 11 @property (nonatomic, strong) UIFont *myFont; 12 @end 13 14 @implementation NJTitleButton 15 16

备忘:UIButton 的图片和标题 向左对齐

UIButton setImage 和 setTitle之后,默认的 image和title 对齐方式是居中, 由于 title 长度不固定, 所以如果要几个这样有image有title的按钮纵向排列对齐, 无论你怎么调整 imageEdgeInsets和titleEdgeInsets,都有可能导致前面图片对得不整齐, 所以,干脆来个向左对齐!!简化处理!! 记住了,这么设置: btn.contentHorizontalAlignment = UIControlContentHorizontal