带斑马线的表格

<h1>斑马线表格</h1>
<table class="table table-striped">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>

刚已经说了，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

? .table：基础表格

? .table-striped：斑马线表格

? .table-bordered：带边框的表格

? .table-hover：鼠标悬停高亮的表格

? .table-condensed：紧凑型表格

? .table-responsive：响应式表格

时间： 2024-08-04 17:20:11

带斑马线的表格的相关文章

在jsp页面中显示表格（带斜线的表格）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

Swift - 使用UISearchController实现带搜索栏的表格

一.实时搜索 --- ViewController.swift --- import UIKit class ViewController: UIViewController { //展示列表 var tableView: UITableView! //搜索控制器 var countrySearchController = UISearchController() //原始数据集 let schoolArray = ["清华大学","北京大学","中国人民

Cocos2dx3.2编写常用UI组件（五）带滚动的表格GridView

前言: 按照惯例先发上效果图: 正文: 先来吐槽几句,一说起滚动效果大家可能会联想到Cocos2dx给我们提供的ScrollView.我一开始也是打算用ScrollView来实现的,但是用着用着发现出现了各种莫名其妙的错误,所以只好自己重新写一个Node,通过onTouchBegan和onTouhMoved两个事件回调来实现滚动的效果. GridView使用说明: 1.利用GridView::create(int row,int column)来创建一个GridView,row和column分别

在HTML中显示带斜线的表格

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte

BootStrap一页通（样式+组件+插件）

bootstrap是一种前端框架,实现美观的页面效果.使用BootStrap的前期工作(注意顺序): <!DOCTYPT html>:因为Bootstrap用到了h5的特性,所以需要此步.导入jQuery:bootstrap需要jQuery才能正常工作,故需要导入 jquery.min.js导入Bootstrap的css:定义各种样式.导入Bootstrap的js:产生交互效果.最后直接套用Bootstrap的class即可,达到想要的效果.<!DOCTYPE html><h

Bootstrap表格

一.Bootstrap表格简介: 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格. ? .table:基础表格 ? .table-striped:斑马线表格 ? .table-bordered:带边框的表格 ? .table-hover:鼠标悬停高亮的表格 ? .table-condensed:紧凑型表格 ? .table-responsive:响应式表格在使用Bootstrap的表格过程中,只需要添加对

Bootstrap系列 -- 9. 表格

一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式 1. .table:基础表格 2. .table-striped:斑马线表格 3. .table-bordered:带边框的表格 4. .table-hover:鼠标悬停高亮的表格 5. .table-condensed:紧凑型表格 6. .table-responsive:响应式表格二. Bootstrap 行样式 <table class="ta

Boottarp学习（二）表格

表格表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格.在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用. 同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本: ? LESS版本,对应的文件是 tables.less ? Sass版本,对应的文件是 _tables.scss 如果你不懂LESS

Bootstrap关于表格

1.Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格. ? .table:基础表格 ? .table-striped:斑马线表格 ? .table-bordered:带边框的表格 ? .table-hover:鼠标悬停高亮的表格 ? .table-condensed:紧凑型表格 ? .table-responsive:响应式表格 2.Bootstrap还为表格的行元素<tr>提供了五种不同的类名,每种类名控制了行的不同背景颜色,具体说明如下表所示: