<!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. 关于BaiduPSC-Go的一些bug的更正

    首先说下操作步骤 下载是在GutHub,这个不赘述,网上很多资料 下载之后配置环境变量,在path的后面加上一个分号,然后加上你下载的目录,目录名最好为英文 然后通过命令行CMD工具,输入BaiduP ...

  2. AAC 码流信息分析

    AAC在对PCM数据进行编码时,使用window取出1024或128个数据进行MDCT转换到频域. Window的相关信息记录在ics_info中: 关于ics_info中各个字段的含义如下 wind ...

  3. 08day 操作命令以及目录结构

    yum /var/log目录(日志文件)两个重要目录:message--记录系统或服务程序运行状态信息 secure--记录用户登录信息 tail -f 查看日志方法    head 查问文件头部

  4. 吴裕雄 python 机器学习——人工神经网络与原始感知机模型

    import numpy as np from matplotlib import pyplot as plt from mpl_toolkits.mplot3d import Axes3D from ...

  5. mybatis--实现数据库增删改查

    首先,创建一个数据库my,并在数据库中插入一张表user,然后在user表中插入一行数据,代码如下: create database my; use my; create table user( id ...

  6. maven私服搭建&使用

    Maven私服搭建教程 一.nexus安装 1,解压安装包 安装包下载地址 2,以管理员身份打开cmd 3,进入到nexus的bin目录 (1) 安装:nexus install (2) 启动:nex ...

  7. 列表与数组 Perl入门第三章

    列表List 是标量的有序集合.数组array则是存储列表的变量.数组/列表的每个元素element都是单独的标量变量,拥有独立的标量值. 1. 数组: 访问数组中的元素: $fred[0]=&quo ...

  8. Python学习之面向对象进阶

    面向对象进阶当然是要谈谈面向对象的三大特性:封装.继承.多态 @property装饰器 python虽然不建议把属性和方法都设为私有的,但是完全暴露给外界也不好,这样,我们给属性赋值的有效性九无法保证 ...

  9. 五分钟学Java：打印Java数组最优雅的方式是什么？

    在逛 Stack Overflow 的时候,发现了一些访问量像‎安第斯山一样高的问题,比如说这个:打印 Java 数组最优雅的方式是什么?访问量足足有 220W+,想不到啊,这么简单的问题竟然有这么多 ...

  10. 【设计模式】UML类图及Java的类之间的关系

    UML类图展示 设计模式中的对象关系 关联和依赖的对比 依赖关系 虚线箭头 依赖是a类成员方法中有b类的属性,动物新陈代谢方法中有水和空气的属性,只有调这个方法的时候,才可能临时用一下 关联关系 实线 ...