<!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. P1582 倒水（贪心 + lowbbit)

    https://www.luogu.com.cn/problem/P1582 #include <bits/stdc++.h> using namespace std; #define i ...

  2. 多数据源切换-Druid

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_37279783/article/d ...

  3. 转载：声音分贝的概念，dBSPL.dBFS

    转自:https://www.cnblogs.com/wangguchangqing/p/5947659.html 分贝 Decibel 分贝(dB)是一个对数单位(logarithmic unit) ...

  4. 【C语言】已知三角形三边长，求三角形面积

    一. 数学基础: 已知三角形的三边,计算三角形面积,需要用到海伦公式: 即p=(a+b+c)/2 二. 算法: 输入三个边长,套用海伦公式计算面积,并输出. 可以先判断是否可以构成三角形,即任意两边之 ...

  5. PHP无法获取.env文件设置的值

    EGPCS指代的是什么?     指的是可以从服务器配置和请求的信息中获取的信息,它包括了environment(环境).GET.POST.cookie.server,对应的全局数组:$_ENV.$_ ...

  6. Hadoop3.1.1架构体系——设计原理阐述与Client源码图文详解 : 总览

    一.设计原理 1.Hadoop架构: 流水线(PipeLine) 2.Hadoop架构: HDFS中数据块的状态及其切换过程,GS与BGS 3.Hadoop架构: 关于Recovery (Lease ...

  7. 错误记录（一）：VSCode

    VS Code莫名其妙突然变卡. 后来重新安装,下载以前版本,设置防止循环,都不太管用. 最后想添加VS Code目录到windows扫描白名单,但因为系统之前是英文不太好看懂,所以又调回了中文. 这 ...

  8. Nuxt的路由配置以及传参

    Nuxt 路由可以使用a标签进行链接跳转,例如我们创建了一个demo.vue的文件 <p> <a href="/demo">跳转去Demo页面</a& ...

  9. Go第三方库之tail

    Tail Demo // tail.TailFile()函数开启goroutine去读取文件,通过channel格式的t.lines传递内容. t, err := tail.TailFile(&quo ...

  10. Java - Test - TestNG: testng.xml 元素 group

    1. 概述 group 相关的元素 groups run 其他相关(不准备提了) package class include exclude 2. 背景 准备 了解了 class 及其子元素 问题 对 ...