-
带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge”,给徽章设置了一个右浮动，当然如果有两个徽章同时在一个列表项中出现时，还设置了他们之间的距离查看全部
-
和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。你可以通过js来处理，或将a标签换成span标签。查看全部
-
Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”查看全部
-
试用。查看全部
-
这是一个div容器查看全部
-
不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时，千万注意，你的<table>元素中一定不能缺少类名“table”。查看全部
-
Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似，只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可查看全部
-
在Bootstrap中实现这种表格效果并不困难，只需要在<table class="table">的基础上增加类名“.table-striped”即可 .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; }查看全部
-
对于基础表格是通过类名“.table”来控制。如果在<table>元素中不添加任何类名，表格是无任何样式效果的。想得到基础表格，我们只需要在<table>元素上添加“.table”类名 “.table”主要有三个作用： ☑ 给表格设置了margin-bottom:20px以及设置单元内距 ☑ 在thead底部设置了一个2px的浅灰实线 ☑ 每个单元格顶部设置了一个1px的浅灰实线查看全部
-
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。 table:基础表格 table-striped:斑马线表格 table-bordered:带边框的表格 table-hover:鼠标悬停高亮的表格 table-condensed:紧凑型表格 table-responsive:响应式表格查看全部
-
Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。 .pre-scrollable { max-height: 340px; overflow-y: scroll; }查看全部
-
在Bootstrap主要提供了三种代码风格： 1、使用<code></code>来显示单行内联代码 2、使用<pre></pre>来显示多行块代码 3、使用<kbd></kbd>来显示用户输入代码 在使用代码时，用户可以根据具体的需求来使用不同的类型： 1、<code>：一般是针对于单个单词或单个句子的代码 2、<pre>：一般是针对于多行代码（也就是成块的代码） 3、<kbd>:一般是表示用户要通过键盘输入的内容查看全部
-
Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。 @media (min-width: 768px) { .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; } } 只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式： 1、将dt设置了一个左浮动，并且设置了一个宽度为160px 2、将dd设置一个margin-left的值为180px，达到水平的效果 3、当标题宽度超过160px时，将会显示三个省略号查看全部
-
通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。查看全部
-
通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。 .list-unstyled { padding-left: 0; list-style: none; } 除了项目编号之外，还将列表默认的左边内距也清０了。查看全部
举报
0/150
提交
取消