Bootstrap学习记录-2.container和table

1. Container

Bootstrap中容器类提供了2个类标识：container、container-fluid。
两者的区别在于：
container：容器不止有15px的padding，还有一个随着浏览器宽度变化而变化的margin。container-fluid：只有固定的15px的padding。
因此，container类的自适应是通过修改margin的改变来完成的，而container-fluid类的百分百宽度是指在固定的15px的padding前提下宽度总是当前视窗的宽度。

2. Table

Bootstrap中表格的标识符包括：table、thead、tbody、tr、th、td。
其中，table表示表格主体，thead表示表头，tbody表示表体，tr表示表格的一行，th表示表头单元格，td表示标准单元格。

table元素需要使用.table类进行装饰。
.table-striped类用来表示表体的行的斑马色。
.table-bordered类用来显示表格及单元格的边框。
.table-hover类用来设置表体的行在鼠标停留时的突出显示状态。
.table-sm类表示将单个元的padding减少一半，使得表格更紧凑。
.table-responsive类表示表格内容超出显示时，将显示水平滚动条。
.table-*类能够改变背景色，能够应用在table、tr和td元素上，比如，.table-dark表示黑色。
.thead-*类能够改变表头背景色，比如，.thead-dark表示黑色。
caption元素用来帮助使用屏幕阅读器的用户快速识别表格，并理解表格意思，类似于对表格内容的说明。
一个表格的基本构成为

<table><caption></caption><thead><tr><th>序号</th><th></th>...</tr></thead><tbody><tr><th>1</th><td></td>...<tr></tbody>
</table>

转载于:https://www.cnblogs.com/DreamOfLife/p/9407985.html

Bootstrap学习记录-2.container和table相关推荐

积跬步，聚小流------Bootstrap学习记录(3)
响应式作为Bootstrap的一大特色.栅格系统可谓是功不可没,既然如此,那我们就来看一下栅格系统是怎样帮助bootstrap实现响应式布局的呢? 1.什么是栅格系统我们能够从Bootstrap的官 ...
积跬步，聚小流------Bootstrap学习记录(2)
现阶段开启每一次新的征程,已然离不开"Hello World"的习惯仪式.这次自然也不例外.先来看下给出的官网给出的演示样例: 1.bootstrap官网提供的html基本模板代码 ...
学习总结5 - bootstrap学习记录1__安装
1.bootstrap是什么? 简洁.直观.强悍的前端开发框架,说白了就是给后端二把刀开发网页用的,让web开发更迅速.简单. 复制代码 2.如何使用? 如图所示到bootstrap中文网进行下载复 ...
bootstrap学习记录
为什么80%的码农都做不了架构师?>>> 目前学了导航,导航栏,面包屑导航breadcrumb,table,panel,group-list,form,栅栏,droplist, ...
【博学谷学习记录】超强总结,用心分享丨前端开发:BootStrap框架基础用法
BootStrap 1.BootStrap简介 Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定HTML 结构及Java ...
php文件上传学习记录
php文件上传学习记录 1.多文件上传及预览功能效果: 代码分两部分: 1.index02.html 2.file_preview.php 1.index02.html: <!DOCTYPE h ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
BootStrap 学习笔记（一）
BootStrap学习大纲: 1.css样式布局容器:container 1)栅格系统栅格系统就是BootStrap把一个div最多分成12列,其中主要的样式 col-md-数字用的最多,其他( ...

Bootstrap学习记录-2.container和table

1. Container

2. Table

Bootstrap学习记录-2.container和table相关推荐

最新文章

热门文章