代码如下:

<!DOCTYPE html>
<html>
<head>
<title>BootStrap的基础入门</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="bootstrap/js/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body style="padding: 50px;background-color: #CCCCCC">
<div class="container" style="background-color: #ffffff;padding: 50px">
<!--                 <h1 class="text-center">有了Html,<del>css和js就能学习</del></h1>
  <ul class="list-inline">
  <li>java</li>
  <li>Python</li>
  <li>ruby</li>
  </ul>
  <p>由两个前端设计师开发的一个前端的框架(Html,css,js)</p>              -->
<div class="table-responsive">
<table class="table table-hover " >
<tr class="active">
<td> java</td>
<td> python</td>
<td> ruby</td>
<td> .net</td>
</tr>
<tr class="success">
<td> zhl</td>
<td> zhl</td>
<td> zhl</td>
<td> zhl</td>
</tr>
<tr class="info">
<td> zhl</td>
<td> zhl</td>
<td> zhl</td>
<td> zhl</td>
</tr>
<tr class="warning">
<td> zhl</td>
<td> zhl</td>
<td> zhl</td>
<td> zhl</td>
</tr>
<tr class="danger">
<td> zhl</td>
<td> zhl</td>
<td> zhl</td>
<td> zhl</td>
</tr>
</table>
</div>
</div>
</body>
</html>

  

BootStrap的table表格的基本写法的更多相关文章

  1. BootStrap的table表格,栅格系统,form表单的样式

    BootStrap BootStrap的简介 1.    什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2.    为什么使用B ...

  2. 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

    Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...

  3. bootstrap学习笔记<四>(table表格)

    表格 bootstrap为table表格定制多个常用样式:基本样式,隔行变色样式,带边框样式,荧光棒样式,紧凑样式,响应样式. ☑  .table:基础表格 ☑  .table-striped:斑马线 ...

  4. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  5. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

  6. bootstrap table表格属性、列属性、事件、方法

    留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...

  7. Bootstrap <基础五>表格

    Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...

  8. Table表格的一些操作

    首先创建一个table表格: <input type="button" id="btn1" value="获取数据" /> &l ...

  9. 【Bootstrap】 bootstrap-table表格组件

    [Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...

随机推荐

  1. lb route 相关的一些问题

    lb route 相关的一些问题 ========================== 查看系统平台和版本 > show hardware Platform: NetScaler Virtual ...

  2. [AT2304] [agc010_c] Cleaning

    题目链接 AtCoder:https://agc010.contest.atcoder.jp/tasks/agc010_c 洛谷:https://www.luogu.org/problemnew/sh ...

  3. 使用Empire自动获取域管理员

    使用Empire自动获取域管理员  译:backlion 前言 自从Empire和BloodHound被应用来,对AD渗透已经可以获取到内网环境95%的信息量.作者发现自己一遍又一遍地在做同样重复的事 ...

  4. innodb--表空间

    MySQL把数据库中表结构的定义信息保存到数据库目录的.frm文件中. 在InnoDB中数据库中存储的数据及索引实际是存放在表空间里的(tablespace). 可以将每个基于InnoDB存储引擎的表 ...

  5. hadoop(二)hadoop集群的搭建

    一.集群环境准备工作 1.修改主机名 在root 账户下 vi /etc/sysconfig/network   或者 sudo vi /etc/sysconfig/network 2.设置系统默认启 ...

  6. python基础----再看property、描述符(__get__,__set__,__delete__)

    一.再看property                                                                          一个静态属性property ...

  7. PHP 多线程采集

    function curl_multi($urls) { if (!is_array($urls) or count($urls) == 0) { return false; } $num=count ...

  8. 一些常见算法的JavaScript实现

    在Web开发中,JavaScript很重要,算法也很重要.下面整理了一下一些常见的算法在JavaScript下的实现,包括二分法.求字符串长度.数组去重.插入排序.选择排序.希尔排序.快速排序.冒泡法 ...

  9. STL源码分析-内存分配器

    http://note.youdao.com/noteshare?id=744696e5f6daf0f2f03f10e381485e67

  10. 题解 P4092 【[HEOI2016/TJOI2016]树】

    参考了皎月半洒花的博客 看到树想到树剖,由于要取距自己到根离自己最近的标记点,刚开始想到线段树里存节点深度,查询时返回最大值.但是这样的话只能得到节点深度,无法得知节点编号,就想倍增乱搞一下,求出标记 ...