-
鼠标悬浮高亮的效果主要是通过“hover”事件来实现，设置了“tr:hover”时的th、td的背景色为新颜色。 其源码请查看bootstrap.css文件中第1469行~第1472行： .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #f5f5f5; }查看全部
-
Bootstrap为表格不同的样式风格提供了不同的类名，主要包括： ☑ .table：基础表格 ☑ .table-striped：斑马线表格 ☑ .table-bordered：带边框的表格 ☑ .table-hover：鼠标悬停高亮的表格 ☑ .table-condensed：紧凑型表格 ☑ .table-responsive：响应式表格查看全部
-
优化代码： 在实际应用运中，你或许希望表格和面板边缘不需要有任何的间距。但由于panel-body设置了一个padding：15px的值，为了实现这样的效果。我们在实际使用的时候需要把table提取到panel-body外面： <div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <table class="table table-bordered">…</table> <div class="panel-footer">作者：大漠</div> </div>查看全部
-
优化代码： 在实际应用运中，你或许希望表格和面板边缘不需要有任何的间距。但由于panel-body设置了一个padding：15px的值，为了实现这样的效果。我们在实际使用的时候需要把table提取到panel-body外面查看全部
-
将默认媒体对象的最外层div.media转换为媒体对象列表的列表项li.media查看全部
-
效果告诉我们，当进度为0%，进度条颜色并没有显示出来，那是因为Bootstrap在样式上做了一定的处理。 /*bootstrap.css文件第4748行~第4759行*/ .progress-bar[aria-valuenow="1"], .progress-bar[aria-valuenow="2"] { min-width: 30px; } .progress-bar[aria-valuenow="0"] { min-width: 30px; color: #777; background-color: transparent; background-image: none; -webkit-box-shadow: none; box-shadow: none; } 注：这段代码BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有这段代码，同时也说明，Bootstrap在不断的完善之中。查看全部
-
使用方法： 在进度条“progress progress-striped”两个类的基础上再加入“active”类名。查看全部
-
彩色进度条，其主要包括以下四种： ☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色 ☑ progress-bar-success：表示成功进度条，进度条颜色为绿色 ☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色 ☑ progress-bar-danger：表示错误进度条，进度条颜色为红色查看全部
-
结构优化： 虽然这样实现了基本进度条效果，但对于残障人员浏览网页有点困难，所以我们可以将结构做得更好些（语义化更友好些）： 1、role属性作用：告诉搜索引擎这个div的作用是进度条。 2、aria-valuenow="40"属性作用：当前进度条的进度为40%。 3、aria-valuemin="0"属性作用：进度条的最小值为0%。 4、aria-valuemax="100"属性作用：进度条的最大值为100%。查看全部
-
.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。 Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。查看全部
-
从上面效果图可以看出，Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。 源码请查看bootstrap.css文件第1442行~第1449行查看全部
-
其源码可以查看bootstrap.css文件第1450行~第1464行： .table-bordered { border: 1px solid #ddd;/*整个表格设置边框*/ } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border: 1px solid #ddd; /*每个单元格设置边框*/ } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom-width: 2px;/*表头底部边框*/ }查看全部
-
在Bootstrap中，对于基础表格是通过类名“.table”来控制。如果在<table>元素中不添加任何类名，表格是无任何样式效果的。想得到基础表格，我们只需要在<table>元素上添加“.table”类名 .table”主要有三个作用： ☑ 给表格设置了margin-bottom:20px以及设置单元内距 ☑ 在thead底部设置了一个2px的浅灰实线 ☑ 每个单元格顶部设置了一个1px的浅灰实线查看全部
-
.active 表示当前活动的信息。（浅蓝） .success 表示成功或者正确的行为（浅绿） .info 表示中立的信息和行为（天蓝） .warning 表示警告，需要特别注意（浅黄色） .danger 表示危险或者可能错误的行为（浅红色） 对应的源码，请查看bootstrap.css文件中第1484行~第1583行。查看全部
-
CSS3的@font-face属性配合字体来实现的icon效果。查看全部
举报
0/150
提交
取消