bootstrap的布局,排版样式,列表样式,表格样式

原创 2018年04月15日 18:36:49

布局容器

bootstrap 它认为每一个网页都应该会拥有固定的宽度,它会在容器里面水平垂直居中或者是占满容器的100% 的宽度。

Bootstrap 将全局 font-size 设置为 14px ,行高为 1.428(20px),<p> 段落行高设置为等于1/2(10px),颜色为 #333

1) 固定的宽度

.container 类用于固定宽度并支持响应式布局的容器(水平居中)。

  2) 百分比宽度

.container-fluid 用于 100% 宽度,占据全部可视化窗口的容器。

排版样式

.text-center 居中对齐

.text-right 居右对齐

.text-left 居左对齐

.text-uppercase 用于将小写字母转换为大写字母

.text-lowercase 用于将大写字母转换为小写字母

.text-capitalize 用于实现首字母大写

<abbr>  标签指示简称或缩写,比如 "WWW" 或 "NATO"(有利于搜索引擎搜索)

<mark> 突出显示文本(加底纹)

<address> 标签定义文档或文章的作者/拥有者的联系信息。

以下是bootstrap复写过样式的标签

<code> 用于表示计算机源代码或者其他机器可以阅读的文本内容。(加底纹)

<kdd> 定义键盘文本(加底纹)

<pre> 常见应用表示计算机的源代码(加底纹和边框)

列表样式

列表:有序列表,无序列表,定义列表。

.sr-only 隐藏一个元素,可以是行可以是列,也可以是整个 table

.list-unstyled 用来将列表前面的项目符号去掉,同时去除列表默认的 margin 值

.list-inline 将列表中的内容排列成同一行,并且增加少量的 padding 值

.dl-horizontal 给定义列表来使用,将定义标题与定义描述信息排列在同一行,将 dt 标记与 dd 标记里面的内容排列在同一行

表格样式

.table 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式,少量 的 padding 和水平方向的分割线。

.table-bordered 为表格和其中的每个单元格增加边框线

.table-striped 实现各行变色的效果(IE8不支持

table.table-striped tr:nth-child(odd){
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

.table-hover实现鼠标放上的效果

		 table.table-hover tr:hover{
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

.table-condensed 紧凑型的表格,将 padding 值减半

.table-responsive 给表格父元素设置响应式,当屏幕小于 768px 时, 出现边框(table-bordered)

状态类

只能给 tr 或者 td 或者 th 来设置,不能给 table 标记来设置

通过这些状态类可以为行或单元格设置颜色

描述实例
.active将悬停的颜色应用在行或者单元格上尝试一下
.success表示成功的操作尝试一下
.info表示信息变化的操作尝试一下
.warning表示一个警告的操作尝试一下
.danger表示一个危险的操作尝试一下

具体请看:
商品名称商品价格商品状态success颜色
小米手机1499代发货active颜色
小米手机1499代发货info颜色
小米手机1499代发货warning颜色
小米手机1499代发货

danger颜色

版权声明: https://blog.csdn.net/dfggffdd/article/details/79948206

Bootstrap 之Table样式

将标签添加class=‘table’ 类后的样式 Table样式 编号姓名年龄 ...
  • Fanbin168
  • Fanbin168
  • 2016-11-18 00:21:58
  • 29537

Bootstrap—轻松制作漂亮表格(table)

学习了runoob.com网站中的bootstrap内容之后,参照其中的内容自己一下总结,以便帮助在这方面有疑惑的朋友,也有助于自己更好的消化所学的内容。 我们应该庆幸自己活在这样一个互联网时代,开放...
  • nongweiyilady
  • nongweiyilady
  • 2016-12-12 10:17:45
  • 3886

Bootstrap简单模板与基本表格

一:页面套用          模板下面专门有个内容页是空白的页面blank page,方便我们套用,右边菜单我们把不需要的删除掉就留几个就可以了                     内容的位置我...
  • aojiancc2
  • aojiancc2
  • 2016-08-05 17:03:29
  • 10729

bootstrap中六种表格样式

表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的...
  • second99
  • second99
  • 2015-11-29 12:27:19
  • 16250

Bootstrap全局CSS样式之表格

.table——基础表格样式; .table-striped——给之内的每一行增加斑马条纹样式; .table-bordered——为表格增加边框; .table-hover——为之内的每一行作悬停效...
  • bboyjoe
  • bboyjoe
  • 2015-07-26 00:40:06
  • 2986

Bootstrap表格样式使用方法

基本Bootstrap表格样式 Bootstrap最基本的表格样式就是在标签中加入table类,然后在标签内嵌套thead和tbody元素即可。 例如:表头表格内容按照这种形式构建的表格是最为...
  • u012238748
  • u012238748
  • 2017-01-16 14:26:31
  • 1743

Bootstrap 基本样式-表格

1 : 基本表格    table 2 : 带斑马线的表格    table table-striped 3 : 带边框的表格    table table-bordered 4 : 有鼠标悬停状态的...
  • wo_shi_LTB
  • wo_shi_LTB
  • 2018-01-19 00:28:31
  • 298

【BootStrap】简单聊一聊CSS全局样式和表格样式-附有源码

转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 CSS全局样式 1、布局容器类样式:.container 和 .con...
  • qq_26525215
  • qq_26525215
  • 2017-01-17 22:47:40
  • 1467

【Bootstrap】表格的CSS布局

      表格在开发中经常会用到,尤其是在展示数据的时候,一个美观的表格设计非常重要。Bootstrap提供了表格组件,其中包括1种基础.table样式,4种附加样式(.table-striped,...
  • u010297791
  • u010297791
  • 2017-06-14 15:53:30
  • 2195

Bootstrap表格样式

Bootstrap表格样式 Bootstrap表格样式分类 基础样式.table 2.带背条纹表格.table-strip...
  • yang5726685
  • yang5726685
  • 2017-04-03 10:04:33
  • 516
收藏助手
不良信息举报
您举报文章:bootstrap的布局,排版样式,列表样式,表格样式
举报原因:
原因补充:

(最多只允许输入30个字)