Bootstrap入门(三)<p>标签的css样式
前提:引入css文件,内容放在一个class为container的div中
 
<p>标签属性
1.“ text-left ”、“ text-right ”、“ text-center ”属性控制<p>标签内容位置

            <p class="text-left">在左</p>
<p class="text-right">在右</p>
<p class="text-center">居中</p>
效果:
2.“ text-lowercase ”、“ text-uppercase ”、“ text-capitalize ”属性控制<p>标签英文内容的大小写 

            <p class="text-lowercase">hahahahhahahaha都小写</p>
<p class="text-uppercase">hahahahhahahaha都大写</p>
<p class="text-capitalize">hahahahhahahaha首字母大写</p>
效果:

3.字体:“text-muted ”、“text-info ”、“text-success ”、“text-warning ”、“text-primary ”、“text-danger ”等属性,对不同情况下的内容进行不同颜色的标注

            <p class="text-muted">text-muted</p>
<p class="text-info">text-info</p>
<p class="text-success">text-success</p>
<p class="text-warning">text-warning</p>
<p class="text-primary">text-primary</p>
<p class="text-danger">text-danger</p>
效果:
 
4.背景:“bg-muted ”、“bg-info ”、“bg-success ”、“bg-warning ”、“bg-primary ”、“bg-danger ”等属性,对不同情况下的内容进行不同颜色背景的标注

            <p class="bg-muted">bg-muted</p>
<p class="bg-info">bg-info</p>
<p class="bg-success">bg-success</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-primary">bg-primary</p>
<p class="bg-danger">bg-danger</p>

效果:

 

Bootstrap入门(三)<p>标签的css样式的更多相关文章

  1. BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  2. PHP使用echo输出标签设置CSS样式问题

    使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...

  3. 后端数据中含有html标签和css样式,前端如何转译展示样式效果。

    后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...

  4. 正确分析结构使用正确的HTML标签。CSS样式写一起。

    在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...

  5. bootstrap入门-4.排版及其他固定样式

    本篇包括以下内容:排版.代码.表格.表单. 总结:超无聊,弃更. · 排版样式                                     标题 h1-h6 取消加粗,字体大小也有一定变化 ...

  6. bootstrap入门-2.固定的内置样式

    HTML5文档类型(Doctype) Bootstrap使用了一些HTML5元素和CSS属性,所以需要使用HTML5文档类型. <!DOCTYPE html> <html> . ...

  7. Bootstrap入门三:页面排版

    在Bootstrap中,页面的排版都是从全局的概念上出发,定制了主体文本.强调文本.标题.Code风格.按钮.表单.表格等格式,并运用CSS3的@font-face和伪元素一起实现了一套icon主题. ...

  8. Vue为v-html中标签添加CSS样式

    在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: <template> <div class="msgHtmlBox" v-ht ...

  9. 前端开发HTML&css入门——盒子模型以及部分CSS样式

    CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...

随机推荐

  1. android init.rc 语法分析

    此文来自于对http://source.android.com/porting/index.html中bring up段的简译.其中有一处与源码的 system/core/init/readme.tx ...

  2. VPN工作原理

    引言 在过去几十年中,世界发生了很大的变化.现在很多公司除了处理本地或地区性事务外,还要考虑全球市场和物流的问题.很多公司在全国甚至全球都设有分支机构,而这些公司都需要做的一件事情就是:找到能够与分公 ...

  3. ubuntu 系统 opencv3.1.0 安装

    opencv编译安装 编译环境安装: sudo apt-get install build-essential 必需包安装: sudo apt-get install cmake git libgtk ...

  4. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  5. c语言 inline函数

    大学在教科书上学习过inline函数,定义为inline函数之后,会省去函数调用的开销,直接嵌套汇编代码,取代函数调用,提高效率. google的google c++ style guide 1.in ...

  6. unity3d 之本地推送

    1. 本地推送主要包括在android和ios上,下面所有的代码都是本人写的,经过测试是没有问题的,已经运用到项目中了.首先是接口INotification: using System; public ...

  7. STM32-NVIC中断管理实现[直接操作寄存器]

    源:stm32 NVIC中断管理实现[直接操作寄存器]     cortex-m3支持256个中端,其中包含了16个内核中断,240个外部中断.stm32只有84个中断,包括16个内核中断和68个可屏 ...

  8. tp框架 使用ajax

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  9. 【转】国外程序员整理的 C++ 资源大全

    内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类 ...

  10. Matlab笔记

    提取RGB分量,并显示出来 rgb=imread('mao.jpg'); rgb_r=rgb(:,:,); rgb_g=rgb(:,:,); rgb_b=rgb(:,:,); zero=zeros(, ...