<!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. bootstrap联动校验（转载）

    接触bootstrapvalidator时间不久,最近需要多个字段共同验证,网上查了一下未找到,查阅api文档,发现确实可以实现. 先看dom <div class="form-gro ...

  2. sqlldr总结参数介绍

    有效的关键字: userid --    ORACLE username/password control -    控制文件 log -        记录的日志文件 *            表示 ...

  3. 网站调用qq第三方登录

    1. 准备工作 (1) 接入QQ登录前,网站需首先进行申请,获得对应的appid与appkey,以保证后续流程中可正确对网站与用户进行验证与授权. ① 注册QQ互联开发者账号  网址  https:/ ...

  4. 记一次使用正则表达式+foreach控制器调试

    使用forEach控制器时,变量为上一个请求返回的参数(通过正则表达式提取),设置好控制器的起始值后发现每次都是只执行一个,然后开始怀疑人生,百度了各种材料,最后还是决心好好的观察自己每一步是不是错了 ...

  5. Codeforces Round #598 (Div. 3) F. Equalizing Two Strings

    You are given two strings ss and tt both of length nn and both consisting of lowercase Latin letters ...

  6. sqli-libs（42-45（post型）关）

    Less_42 查看源代码,可以看到password没有经过mysqli_real_escape_string()函数进行处理,所以这个时候我们在这个位置进行构造 使用admin 111111进行登录 ...

  7. drf大总结

    接口 """ 1.什么是接口:url+请求参数+响应数据 | 接口文档 2.接口规范: url:https,api,资源(名词复数),v1,get|post表示操作资源的 ...

  8. Nuxt 环境搭建已经编写第一个Nuxt应用

    在学习Nuxt 之前 首先我们要有node ,然后因为Nuxt 是一个基于 Vue.js 的轻量级应用框架,所以在开发之前需要安装(后面纯属作者猜想并且猜想就是这个原因...) npm install ...

  9. jeecg /ant-design-vuepro 前端使用

    1.原生axios使用 <script> import Vue from 'vue'; import axios from 'axios'; axios.defaults.baseURL ...

  10. Linux挂载（mount,umount及开机自动挂载

    挂载概念简述: 根文件系统之外的其他文件要想能够被访问,都必须通过“关联”至根文件系统上的某个目录来实现,此关联操作即为“挂载”,此目录即为“挂载点”,解除此关联关系的过程称之为“卸载” 1.挂载:根 ...