代码如下:

<!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. Android 解决ScrollView嵌入ListView | GridView | ScrollView显示问题

    一.ScrollView中嵌套ListView ScrollView和ListView都是滚动结构,很明显如果在ScrollView中加入ListView,可以预见性的知道,肯定会有显示/滚动的问题, ...

  2. 基于三个kinect的人体建模

       单个kinect的人体重建,在Kinect SDK 1.8中,Kinect Fusion的效果已经很不错了.其缺点显而易见,一是扫描时间长,重建对象也需要长时间保持静态:二是需要人体或者kine ...

  3. Unity3D for VR 学习(6): 再次温故知新-3D数学

    一年前,系统学习过3D数学,并记录了一篇博客<C#程序员整理的Unity 3D笔记(十):Unity3D的位移.旋转的3D数学模型>. 一年后,再次温习之. 坐标系:Unity3D使用左手 ...

  4. 使用Hexo写博客

    首先,你需要搭建一个Hexo博客网站- 使用Hexo搭建GitHub博客(2018年Mac版) 原生方式新建文章 Hexo的项目结构是在网站根目录的source/_posts目录下存放你的博客文档,以 ...

  5. 在VS2010中使用Git【图文】

    http://blog.csdn.net/laogong5i0/article/details/10974285 在之前的一片博客<Windows 下使用Git管理Github项目>中简单 ...

  6. Myeclipse下更改所有jsp、html文件的编码

    windows-->>preferences-->>gengral-->>

  7. PostgreSQL 传统 hash 分区方法和性能

    背景 除了传统的基于trigger和rule的分区,PostgreSQL 10开始已经内置了分区功能(目前仅支持list和range),使用pg_pathman则支持hash分区. 从性能角度,目前最 ...

  8. (转)ARC指南 - strong、weak指针

    一.简介 ARC是自iOS 5之后增加的新特性,完全消除了手动管理内存的烦琐,编译器会自动在适当的地方插入适当的retain.release.autorelease语句.你不再需要担心内存管理,因为编 ...

  9. C++类间转换之dynamic_cast

    当在C++的基类与派生类之间转换时,其多态性充分显现出来: 本次只讨论  dynamic_cast  的用法. 在查阅资料后发现百度百科关于  dynamic_cast  (以及static_cast ...

  10. VMware 与Ubuntu通过samba服务器共享文件

    Linux和windows在虚拟机下文件共享有很多种方式,常用的有使用VMware Tools共享和Samba服务器进行共享,使用VMware Tools这里就不说了,我使用的是Samba服务器. 其 ...