<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Bootstrap 实例</title>

    <!-- 包含头部信息用于适应不同设备 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 包含 bootstrap 样式表 -->

    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">

  </head>

  <body>

    <div class="container">

      <h2>表格</h2>

      <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</p>

      <div class="table-responsive">

       <table class="table table-striped table-bordered">

         <thead>

           <tr>

             <th>#</th>

             <th>Name</th>

             <th>Street</th>

           </tr>

         </thead>

         <tbody>

           <tr>

             <td>1</td>

             <td>Anna Awesome</td>

             <td>Broome Street</td>

           </tr>

           <tr>

             <td>2</td>

             <td>Debbie Dallas</td>

             <td>Houston Street</td>

           </tr>

           <tr>

             <td>3</td>

             <td>John Doe</td>

             <td>Madison Street</td>

           </tr>

         </tbody>

       </table>

      </div>

      <h2>图像</h2>

      <p>创建响应式图片(将扩展到父元素)。 另外：图片以椭圆型展示：</p>

      <img src="tu/cat.jpg" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236"> 

      <h2>图标</h2>

      <p>插入图标:</p>

      <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>

      <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>

      <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>

      <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>

      <p>下载图标：<span class="glyphicon glyphicon-download"></span></p>

    </div>

    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->

    <!-- 可选: 包含 jQuery 库 -->

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->

    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  </body>

</html>

<!DOCTYPE html>

<html>

<head>

  <title>Bootstrap 实例</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

  <div class="jumbotron">

    <h1>我的第一个 Bootstrap 页面</h1>

    <p>重置窗口大小，查看响应式效果！</p>

  </div>

  <div class="row">

    <div class="col-sm-4">

      <h3>第一列</h3>

      <p>学的不仅是技术，更是梦想！</p>

      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>

    </div>

    <div class="col-sm-4">

      <h3>第二列</h3>

      <p>学的不仅是技术，更是梦想！</p>

      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>

    </div>

    <div class="col-sm-4">

      <h3>第三列</h3>

      <p>学的不仅是技术，更是梦想！</p>

      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>

    </div>

  </div>

</div>

</body>

</html>

吴裕雄 Bootstrap 前端框架开发——简介的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：响应式的列重置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：手机、平板电脑、台式电脑

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title&g ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：中型和大型设备

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 中型和大型设备</title> &l ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：堆叠的水平

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——简例

    <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta cha ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：引用（Blockquote）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：地址（Address）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：缩写

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 缩写</title> <lin ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：强调

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 伪数组变数组 js

    语法糖:简单的说:用语法糖就是把复杂(有助于让我们理解代码含义)的代码,让我们可以简单的敲出来.这种语法对语言本身功能来说没有什么影响,只是为了方便程序员的开发,提高开发效率 方法一: var a=d ...

  2. 查看ie版本

    window10系统还好说,一般都是IE11版本,其他系统或服务器看=查看ie版本就很烦 方法一:按组合键  ALT+H 打开“帮助”,再按 A 选择“关于Internet Explorer” 方法二 ...

  3. HBase 中 Memstore-Local Allocation Buffer

    在0.90 版本后的 HBase,引入了一个高级机制用于缓解堆内存碎片的问题.此内存碎片问题的产生的主要原因是由于 memstore 上的扰动(频繁的分配与释放内存空间)导致.对应解决此问题的机制为M ...

  4. 题解【SP1716】GSS3 - Can you answer these queries III

    题目描述 You are given a sequence \(A\) of \(N (N <= 50000)\) integers between \(-10000\) and \(10000 ...

  5. 【转载】Java中的容器讲解

    转自:http://blog.csdn.net/garfielder007/article/details/52143794 Set,List,Map,Vector,ArrayList的区别 Java ...

  6. 第二十九篇 玩转数据结构——线段树（Segment Tree）

          1.. 线段树引入 线段树也称为区间树 为什么要使用线段树:对于某些问题,我们只关心区间(线段) 经典的线段树问题:区间染色,有一面长度为n的墙,每次选择一段墙进行染色(染色允许覆盖),问 ...

  7. 第二十篇 Linux条件测试语句相关知识点介绍

      条件测试语句的格式如下: [ 条件表达式 ]        # 条件表达式两侧各有一个空格 按测试对象不同,条件测试语句共分为4中类型: 文件测试语句 逻辑测试语句 整数值比较语句 字符串比较语句 ...

  8. 两台linux之间传输文件

    scp传输 当两台LINUX主机之间要互传文件时可使用SCP命令来实现 scp传输速度较慢,但使用ssh通道保证了传输的安全性 复制文件 将本地文件拷贝到远程 scp local_file remot ...

  9. Codeforces 1315A Dead Pixel （水题）

    Screen resolution of Polycarp's monitor is a×ba×b pixels. Unfortunately, there is one dead pixel at ...

  10. rabbitmq - 简单认识

    1. 概述 与 rabbitmq 做交互 amqp 最著名的实现 与 jms 最明显的区别 消息 不是去找 queue 而是去找 exchange 2. rabbitmq 基本组件 sender 发送 ...