<!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. 题解 【洛谷P1035】[NOIP2002普及组]级数求和

    [NOIP2002普及组]级数求和 这个题……用循环也是可以的,不过我写了两种循环的题解,供各位dalao参考!O(∩_∩)O谢谢! for循环版本: #include<bits/stdc++. ...

  2. jquery获取select多选框选中的文本值

    $("#select option:selected").text();

  3. python开发基础02-字符串操作方法练习题

    1.执行 Python 脚本的两种方式 python解释器 py文件  #!/usr/bin/env python 进入python解释器,便捷命令并执行 pycharm或其他pythonIDE sh ...

  4. 很多win10系统用户都遇见了开机发现任务管理器中有个系统中断进程占用cpu99%的问题，

    很多win10系统用户都遇见了开机发现任务管理器中有个系统中断进程占用cpu99%的问题,尝试了网上提供的方法都不能得到有效的解决.下面小编就为大家详细的介绍电脑工程师提供的正确的解决姿势. 出现系统 ...

  5. spring boot配置druid数据连接池

    Druid是阿里巴巴开源项目中一个数据库连接池. Druid是一个jdbc组合,包含三个部分, 1.DruidDriver代理Driver,能够提供基于Filter-Chain模式得插件体系2.Dru ...

  6. binwalk在Windows10和kali_Linux下的安装及使用教程

    (一)binwalk简介    binwalk 是用于搜索给定二进制镜像文件以获取嵌入的文件和代码的工具.  具体来说,binwalk是一个固件的分析工具,旨在协助研究人员对固件非分析,提取及逆向工程 ...

  7. 使用docker踩过的坑（二）

    关于docker的部署,我这里不多说了 下面写一些最近经常用到的命令: docker下载镜像: docker pull 镜像名 docker查看已下载的所有镜像: docker images dock ...

  8. 1.什么是Mybatis？

    在学习之前我们要回顾以下知识 JDBC Mysql java基础 Maven Junit 什么是 MyBatis? MyBatis 是一款优秀的持久层框架MyBatis 避免了几乎所有的 JDBC 代 ...

  9. 每天进步一点点------Sobel算子（3）基于彩色图像边缘差分的运动目标检测算法

    摘  要: 针对目前常用的运动目标提取易受到噪声影响.易出现阴影和误检漏检等情况,提出了一种基于Sobel算子的彩色边缘图像检测和帧差分相结合的检测方法.首先用Sobel算子提取视频流中连续4帧图像的 ...

  10. 架构师必备技能指南：SaaS(软件即服务)架构设计

    1.介绍 从计算机诞生开始,就伴随着计算机应用程序的演变.简短的回顾历史,我们可以清楚的看到应用程序发生的巨大变化.上世纪70年代中期,随着个人PC机的爆炸式增长以及程序员的崛起,让计算机的计算能力得 ...