作者:井上英精_824 | 来源:互联网 | 2020-08-22 05:44
本篇文章就给大家介绍bootstrap布局之排版样式、列表样式、表格样式。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程!
本篇文章就给大家介绍bootstrap布局之排版样式、列表样式、表格样式。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程!
布局容器
bootstrap 它认为每一个网页都应该会拥有固定的宽度,它会在容器里面水平垂直居中或者是占满容器的100% 的宽度。
Bootstrap 将全局 font-size 设置为 14px ,行高为 1.428(20px), 段落行高设置为等于1/2(10px),颜色为 #333
1) 固定的宽度
.container 类用于固定宽度并支持响应式布局的容器(水平居中)。
2) 百分比宽度
.container-fluid 用于 100% 宽度,占据全部可视化窗口的容器。
排版样式
.text-center 居中对齐
.text-right 居右对齐
.text-left 居左对齐
.text-uppercase 用于将小写字母转换为大写字母
.text-lowercase 用于将大写字母转换为小写字母
.text-capitalize 用于实现首字母大写
标签指示简称或缩写,比如 "WWW" 或 "NATO"(有利于搜索引擎搜索)
突出显示文本(加底纹)
以下是bootstrap复写过样式的标签
用于表示计算机源代码或者其他机器可以阅读的文本内容。(加底纹)
常见应用表示计算机的源代码(加底纹和边框)
列表样式
列表:有序列表,无序列表,定义列表。
.sr-only 隐藏一个元素,可以是行可以是列,也可以是整个 table
.list-unstyled 用来将列表前面的项目符号去掉,同时去除列表默认的 margin 值
.list-inline 将列表中的内容排列成同一行,并且增加少量的 padding 值
.dl-horizontal 给定义列表来使用,将定义标题与定义描述信息排列在同一行,将 dt 标记与 dd 标记里面的内容排列在同一行
表格样式
.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社区 其它相关文章!
推荐阅读
-
本文介绍了处理docker容器时间和宿主机时间不一致问题的方法,包括复制主机的localtime到容器、处理报错情况以及重启容器的步骤。通过这些方法,可以解决docker容器时间和宿主机时间不一致的问题。 ...
[详细]
蜡笔小新 2023-12-13 18:55:18
-
本文介绍了Java的集合及其实现类,包括数据结构、抽象类和具体实现类的关系,详细介绍了List接口及其实现类ArrayList的基本操作和特点。文章通过提供相关参考文档和链接,帮助读者更好地理解和使用Java的集合类。 ...
[详细]
蜡笔小新 2023-12-13 14:12:18
-
-
本文介绍了在Docker容器技术中限制容器对CPU的使用的方法,包括使用-c参数设置容器的内存限额,以及通过设置工作线程数量来充分利用CPU资源。同时,还介绍了容器权重分配的情况,以及如何通过top命令查看容器在CPU资源紧张情况下的使用情况。 ...
[详细]
蜡笔小新 2023-12-12 18:31:07
-
本文讨论了微软的STL容器类是否线程安全。根据MSDN的回答,STL容器类包括vector、deque、list、queue、stack、priority_queue、valarray、map、hash_map、multimap、hash_multimap、set、hash_set、multiset、hash_multiset、basic_string和bitset。对于单个对象来说,多个线程同时读取是安全的。但如果一个线程正在写入一个对象,那么所有的读写操作都需要进行同步。 ...
[详细]
蜡笔小新 2023-12-11 11:53:23
-
本文介绍了一种图片处理应用,通过固定容器来实现缩略图的功能。该方法可以实现等比例缩略、扩容填充和裁剪等操作。详细的实现步骤和代码示例在正文中给出。 ...
[详细]
蜡笔小新 2023-12-10 18:52:53
-
本文详细介绍了如何设计和实现一个微信答题小程序,包括题库的设计和题目的呈现。通过抽取题目编号和使用全局变量记录当前题目的信息,实现了题目的刷新和显示。同时,还介绍了题目的展示方式和容器的创建。本文适合零基础的小白学习微信答题小程序的开发。 ...
[详细]
蜡笔小新 2023-12-10 10:34:34
-
1.脚本功能1)自动替换jar包中的配置文件。2)自动备份老版本的Jar包3)自动判断是初次启动还是更新服务2.脚本准备进入ho ...
[详细]
蜡笔小新 2023-10-17 19:08:29
-
初识java关于JDK、JRE、JVM 了解一下 ...
[详细]
蜡笔小新 2023-10-17 17:17:17
-
ElasticSearch成功安装完毕。 测试数据添加出现{ error:{ root_cause ...
[详细]
蜡笔小新 2023-10-17 15:46:32
-
这一节来做二级分类,为了快速开发,一级分类只做新增,暂时不考虑修改和删除,如果一定要删,就去数据库删吧。我们接下来,需要通过一级分类,获取所有的二级分类。开始 ...
[详细]
蜡笔小新 2023-10-17 15:30:11
-
systemd-nspawn可以创建最轻量级的容器(ns的意思就是namespace),本文的实验平台是Ubuntu16.04,x86_64机器。本文的目的是:在Ubuntu中用syst ...
[详细]
蜡笔小新 2023-10-17 14:49:15
-
本文详细介绍了SQL日志收缩的方法,包括截断日志和删除不需要的旧日志记录。通过备份日志和使用DBCC SHRINKFILE命令可以实现日志的收缩。同时,还介绍了截断日志的原理和注意事项,包括不能截断事务日志的活动部分和MinLSN的确定方法。通过本文的方法,可以有效减小逻辑日志的大小,提高数据库的性能。 ...
[详细]
蜡笔小新 2023-12-14 18:23:25
-
本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ...
[详细]
蜡笔小新 2023-12-14 18:18:21
-
本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ...
[详细]
蜡笔小新 2023-12-14 18:16:27
-
本文介绍了在Centos7上搭建ELK(Elasticsearch、Logstash、Kibana)的详细步骤,包括下载安装包、安装Elasticsearch、创建用户、修改配置文件等。同时提供了使用华为镜像站下载安装包的方法,并强调了保证版本一致的重要性。 ...
[详细]
蜡笔小新 2023-12-10 16:27:21
-