Bootstrap全局CSS样式及代码展示

1.排版

1.1页面主题

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

人生

从csdn开始

走向人生巅峰

1.2标题

在Bootstrap中,标题可以有副标题,副标题比正标题的字体小一点,样式有点不太一样。

        1.2.1标题h1--h6和html中的效果一样

        1.2.2副标题:在

副标题

卓越人生,从csdn开始

        1.2.3样式:class=”h1”...class=”h6”

卓越人生,从csdn开始

卓越人生,从csdn开始

卓越人生,从csdn开始

卓越人生,从csdn开始

卓越人生,从csdn开始

卓越人生,从csdn开始

1.3内联文本元素

        1.3.1标记:class=”mark”

        I like you 很久了

         1.3.2线条

删除:I like 或者I like

下划线:I like 或者I like

        1.3.3强调文本

 小字体:标准字号的85%

海萍

文本加粗:

海萍

文本倾斜:

海萍

1.4对齐 

        1.4.1居左:class=”text-left”

示例代码:

卓越人生,从csdn开始

        1.4.2居中:class=”text-center”

 

卓越人生,从csdn开始

        1.4.3居右:class=”text-right”

 

卓越人生,从csdn开始

1.5改变大小写 

        1.5.1大写:class=”text-uppercase”

i like you

        1.5.2小写:class=”text-lowercase”

I like you

        1.5.3首字母大写:class=”text-capitalize”

i like you

 1.6缩略语:当鼠标悬停在缩写和缩写词上就会显示完整内容

        1.6.1基本缩略语:

HTML是一门超简单的网页语言

         1.6.2首字母缩略语:

title="超文本标记语言" class="initialism">HTML是一门超简单的网页语 

1.7地址:

家庭地址:湖南

  

公司地址:北京>

1.8引用:类似名言名句的格式

        1.8.1默认样式的引用:
  

 

阳光总在风雨后
海萍

        1.8.2右对齐样式引用:

阳光总在风雨后
海萍

 1.9列表

        1.9.1有序列表:

        1.9.2无序列表:

        1.9.3无样式列表:
    ,去掉li前面的点

  • 花间一壶酒
  • 独酌无相亲
  • 举杯邀明月,对影成三人

         1.9.4内联列表:
    ,li显示在一行

  • 月既不解饮
  • 影徒随我身
  • 暂伴月将影,行乐须及春

        1.9.5描述列表:
。 horizontal:水平

首页

这是首页的信息

csdn品牌

卓越人生,从csdn开始

>

2.代码 

2.1内联代码:通过标签包裹内联样式的代码片段

花间一壶酒,独酌无相亲。举杯邀明月,对影成三人。

2.2 用户输入:通过标签标记用户通过键盘输入的内容

Ctrl+C

给kbd标签包裹起来的内容加样式

2.3基本代码块:多行代码可以使用
标签

花间一壶酒,独酌无相亲

举杯邀明月,

对影成三人

pre标签内的内容所有的空格 都会原样显示,标签内的文本编辑格式,会按照原样显示

设置pre区域显示垂直滚动条:

花间一壶酒,独酌无相亲

举杯邀明月,

对影成三人

3表格 

3.1基本表格:

.......

编号 姓名 性别 年龄
1 张三 18

table>

.......

编号 姓名 性别 年龄
1 张三 18

3.2 条纹状表格:

table table-striped>

.......

编号 姓名 性别 年龄
1 张三 18

3.3带边框表格:

table table-bordered>

.......

编号 姓名 性别 年龄
1 张三 18

顾名思义 这个就是有边框的表格

 3.4鼠标悬停:

table table-hover>

.......

编号 姓名 性别 年龄
1 张三 18

鼠标移动到行就会显示效果

 3.5紧缩表格:

table table-condensed>

.......

编号 姓名 性别 年龄
1 张三 18

顾名思义 紧缩表格,就是表格相对来说缩紧一些,仔细看行的上下两条线是不是缩紧了

3.6 状态类

        3.6.1class=”active”:鼠标悬停在行或者单元格上时设置的颜色

1

张三

18

设置行为灰色

        3.6.2 class=”success”:表示成功或积极的动作

1

张三

18

设置行为绿色

        3.6.3 Class=”info”:表示普通的提示信息或动作

设置行为蓝色

1

张三

18

        3.6.4 Class=”warning”:表示警告或需要用户注意

1

张三

18

设置行为黄色

         3.6.5Class=”danger”:表示危险或潜在的带来负面影响的动作

1

张三

18

设置行为红色

3.7 响应式表格:

,给包括
的元素添加class=”table-responsive”

响应式表格会根据页面缩小,给表格第一行上面添加边框

你可能感兴趣的:(css,bootstrap,html)

1 张三 18