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>
Bootstrap学习记录-2.container和table的更多相关文章
- Lua和C++交互 学习记录之四:全局table交互
主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3 参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...
- bootstrap学习记录(慕课网教程)
1.当主标题下需要副标题时可在h中嵌套small<h1>nihao<small>a</samll></h1> 2.当某一段落需要突出显示时可添加lead ...
- 积跬步,聚小流------Bootstrap学习记录(3)
响应式作为Bootstrap的一大特色.栅格系统可谓是功不可没,既然如此,那我们就来看一下栅格系统是怎样帮助bootstrap实现响应式布局的呢? 1.什么是栅格系统 我们能够从Bootstrap的官 ...
- Bootstrap学习记录-1.Navigation
Bootstrap中的导航栏功能需要添加bootstrap.css.jquery.js.bootstrap.js,其中,jquery.js文件是bootstrap.js文件中必须的,否则就会抛出异常信 ...
- Bootstrap学习记录
中文官网 Bootstrap 插件 Bootstrap Multiselect bootstrap-multiselect 的简单使用,样式修改,动态创建option JS组件系列——Bootstra ...
- 积跬步,聚小流------Bootstrap学习记录(2)
现阶段开启每一次新的征程,已然离不开"Hello World"的习惯仪式.这次自然也不例外.先来看下给出的官网给出的演示样例: 1.bootstrap官网提供的html基本模板代码 ...
- Bootstrap学习记录-3.Badge、Breadcrumb、Buttons、 Button Group、Card、Carousel
1. Badge Badge作为数值标记组件,它能作为链接或按钮的一部分来提供计数作用,而且它通过使用相对字体大小来适应父级元素的大小.它的最基本的修饰符为.badge .badge-*. <b ...
- 积跬步,聚小流------Bootstrap学习记录(1)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- Lua和C++交互 学习记录之九:在Lua中以面向对象的方式使用C++注册的类
主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3 参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 在 ...
随机推荐
- 服务器被minerd
cd /opt chmod -x minerd 去/root/.ssh 目录下,清除authorized_keys,KHK75NEOiq 文件 在ssh的配置文件/etc/ssh/sshd_confi ...
- LOJ-10106(有向图欧拉回路的判断)
题目链接:传送门 思路: (1)将每个单词视为有向路径,单词的起始字母是起始节点,末尾字母是终止节点,然后找由字母建立的有向图 是否是欧拉图或者半欧拉图. (2)先用并查集判断是否连通,再判断入度与出 ...
- LOJ-10105(欧拉回路模板,套圈法,递归)
题目链接:传送门 思路: (1)用邻接表存储有向图和无向图,有向图和无向图的每条边均站两个单元,无向图有正向边和反向边的区分. (2)有向图有欧拉回路:所有点的入度=出度: 无向图有欧拉回路:所有点的 ...
- Postgresql之VACUUM和VACUUM FULL对比
VACUUM命令存在两种形式,VACUUM和VACUUM FULL,它们之间的区别见如下表格: 无VACUUM VACUUM VACUUM FULL 删除大量数据之后 只是将删除数据的状态置为已删除, ...
- python模块:configparser
"""Configuration file parser. A configuration file consists of sections, lead by a &q ...
- Mac could not read from remote repository
IDE clone数据的时候要使用SSH,不使用HTTPS,就解决了问题
- python open()函数的模式选择
python open()函数打开文件的模式详解 使用python处理文件时,避免不了要用到open()函数.我们今天主要讨论mode参数的区分. fd = open('文件名(路径)’, mode= ...
- noip第23课资料
- 卷积在深度学习中的作用(转自http://timdettmers.com/2015/03/26/convolution-deep-learning/)
卷积可能是现在深入学习中最重要的概念.卷积网络和卷积网络将深度学习推向了几乎所有机器学习任务的最前沿.但是,卷积如此强大呢?它是如何工作的?在这篇博客文章中,我将解释卷积并将其与其他概念联系起来,以帮 ...
- PMP:5.项目范围管理
项目范围管理包括确保项目做且只做所需的全部工作,以成功完成项目的各个过程. 管理项目范围主要在于定义和控制哪些工作应该包括在项目内,哪些不应该包括在项目内. 核心概念: 规划范围管理:为记录如何定 ...