首页 > html教程 > 正文

bootstrap布局之排版样式、列表样式、表格样式介绍

转载 2018-10-13 16:56:49 0 983
本篇文章就给大家介绍bootstrap布局之排版样式、列表样式、表格样式。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程

布局容器

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> 突出显示文本(加底纹)

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

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

<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 时, 四周出现边框

状态类

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

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

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

具体请看:

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

danger颜色

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

以上就是bootstrap布局之排版样式、列表样式、表格样式介绍的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:bootstrap布局 排版样式 列表样式 表格样式
  • 本文转载于:CSDN,如有侵犯,请联系删除
  • 相关文章


  • 全面解析Bootstrap布局组件应用_javascript技巧
  • 实现bootstrap布局的input输入框中的图标点击功能 - hello八戒
  • bootstrap布局篇详解(一)
  • bootstrap布局篇详解(二)
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • bootstrap响应式开发教程 bootstrap响应式开发教程
  • BootStrap插件讲解视频教程 BootStrap插件讲解视频教程
  • BootStrap经典案例分析 BootStrap经典案例分析
  • Bootstrap常用样式组件与实战 Bootstrap常用样式组件与实战
  • bootstrap项目实战:快速构建响应式网页 bootstrap项目实战:快速构建响应式网页
  • 相关视频章节