为了账号安全,请及时绑定邮箱和手机立即绑定

玩转Bootstrap(基础)

  • 注意响应式表格使用格式跟紧凑,边框,hover striped都不一样,<div class="table-responsive"> <table class="table table-bordered"> … </table> </div>
    查看全部
  • 不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时,千万注意,你的<table>元素中一定不能缺少类名“table”。
    查看全部
  • 何谓紧凑型表格,简单理解,就是单元格没内距或者内距较其他表格的内距更小。换句话说,要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中,通过类名“table-condensed”重置了单元格内距值。 紧凑型表格的运用,也只是需要在<table class="table">基础上添加类名“table-condensed”:
    查看全部
  • 注:其实,鼠标悬浮高亮表格,可以和Bootstrap其他表格混合使用。简单点说,只要你想让你的表格具备悬浮高亮效果,你只要给这个表格添加“table-hover”类名就好了。例如,将前面介绍的几种表格结合使用:
    查看全部
  • 当鼠标悬停在表格的行上面有一个高亮的背景色,这样的表格让人看起来就是舒服,时刻告诉用户正在阅读表格哪一行的数据。Bootstrap的确没有让你失望,他也考虑到这种效果,其提供了一个“.table-hover”类名来实现这种表格效果。 鼠标悬停高亮的表格使用也简单,仅需要<table class="table">元素上添加类名“table-hover”
    查看全部
  • 基础表格仅让表格部分地方有边框,但有时候需要整个表格具有边框效果。Bootstrap出于实际运用,也考虑这种表格效果,即所有单元格具有一条1px的边框。 Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似,只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可
    查看全部
  • 仅是在tbody隔行有一个浅灰色的背景色。其实现原理也非常的简单,利用CSS3的结构性选择器“:nth-child”来实现,所以对于IE8以及其以下浏览器,没有背景条纹效果。
    查看全部
  • 有时候为了让表格更具阅读性,需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难,只需要在<table class="table">的基础上增加类名“.table-striped”
    查看全部
  • 基础表格 在Bootstrap中,对于基础表格是通过类名“.table”来控制。如果在<table>元素中不添加任何类名,表格是无任何样式效果的。想得到基础表格,我们只需要在<table>元素上添加“.table”类名,就可以得到Bootstrap的基础表格:
    查看全部
  • 特别提示:除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。 注意要实现悬浮状态,需要在<table>标签上加入table-hover类
    查看全部
  • Bootstrap还为表格的行元素<tr>提供了五种不同的类名,每种类名控制了行的不同背景颜色 http://img1.sycdn.imooc.com//53ad213f0001b08807340508.jpg
    查看全部
  • Bootstrap为表格不同的样式风格提供了不同的类名,主要包括: ☑ .table:基础表格 ☑ .table-striped:斑马线表格 ☑ .table-bordered:带边框的表格 ☑ .table-hover:鼠标悬停高亮的表格 ☑ .table-condensed:紧凑型表格 ☑ .table-responsive:响应式表格
    查看全部
    0 采集 收起 来源:表格

    2018-03-22

  • ,<pre>元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
    查看全部
    0 采集 收起 来源:代码(二)

    2018-03-22

  • 本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格: 1、使用<code></code>来显示单行内联代码 2、使用<pre></pre>来显示多行块代码 3、使用<kbd></kbd>来显示用户输入代码
    查看全部
    0 采集 收起 来源:代码(一)

    2018-03-22

  • 此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式: 1、将dt设置了一个左浮动,并且设置了一个宽度为160px 2、将dd设置一个margin-left的值为180px,达到水平的效果 3、当标题宽度超过160px时,将会显示三个省略号
    查看全部

举报

0/150
提交
取消
课程须知
本教程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、了解Bootstrap框架 2、如何使用Bootstrap制作Web页面或Web应用程序 3、如何定制个性化Bootstrap

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!