Bootstrap

Bootstrap简介

什么是bootstrap?

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap支持响应式布局!响应式布局指的是一个网站能够兼容多种终端设备访问!. 终端设备:..电脑、平板电脑、手机

使用html5文档结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好,世界!</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

  布局容器

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   
    <div class="container" style="border: 1px solid #00ff;">布局容器固定宽度</div>
    <!-- <div class="container-fluid" style="border: 1px solid #00ff;">布局容器百分百宽度</div> -->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html> 

排版样式

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container" style="border:2px solid #4444;">
      <h1>排版样式</h1>
      <h2>排版样式</h2>
      <h3>排版样式</h3>
      <h4>排版样式</h4>
      <h5>排版样式</h5>
      <h6>排版样式</h6>
      <span class="h1">我是排版样式</span><span class="h2">我是排版样式</span>
    
    
      <p>我说<strong>把你打断</strong>,把你的话<em>王旭</em>ad是个<del>好孩子</del>,好在衣<ins>着换用</ins>服上,问吗?</p>
      <div class="text-left">聪明的你</div>
      <div class="text-center">聪明的你</div>
      <div class="text-right">聪明的你</div>

      <div>聪明的你</div>
      
      <div class="text-uppercase">this is smart man</div>
      <div class="text-lowercase">this IS smart man</div>
      <div class="text-capitalize">this IS smart man</div>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

列表样式

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container" style="border: 3px solid #22f">
      <h1>知名大学</h1>
      <ul>
        <li>北京大学</li>
        <li>清华大学</li>
        <li>理工大学</li>
        <li>华北大学</li>
      </ul>

      <ul class="list-unstyled">
        <li>北京大学</li>
        <li>清华大学</li>
        <li>理工大学</li>
        <li>华北大学</li>
      </ul>

      <ul class="list-inline">
        <li>北京大学</li>
        <li>清华大学</li>
        <li>理工大学</li>
        <li>华北大学</li>
      </ul>
    </div>
    
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

表格样式

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container" style="border: 3px solid #22f">
      <table class="table table-bordered table-hover table-striped">
        <tr>
          <td class="alert-info">123</td>
          <td class="active">456</td>
          <td>789</td>
          <td>951</td>
        </tr>
        <tr class="table-success">
          <td>123</td>
          <td>456</td>
          <td>789</td>
          <td>951</td>
        </tr>
        <tr class="alert-danger">
          <td>123</td>
          <td>456</td>
          <td>789</td>
          <td>951</td>
        </tr>
        <tr class="alert-warning">
          <td>123</td>
          <td>456</td>
          <td>789</td>
          <td>951</td>
        </tr>
      </table>
    </div>
    
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

按钮样式

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container" style="border: 3px solid #22f">
      <table class="table table-bordered table-hover table-striped">
        <tr>
          <td class="alert-info">123</td>
          <td class="active">456</td>
          <td>789</td>
          <td>951</td>
          <td>操作</td>
        </tr>
        <tr class="table-success">
          <td>123</td>
          <td>456</td>
          <td>789</td>
          <td>951</td>
          <td><button type="button" class="btn">按钮</button><button type="button" class="btn btn-default">按钮</button><button type="button" class="btn btn-primary">按钮</button></td>
        </tr>
        <tr class="alert-danger">
          <td>123</td>
          <td>456</td>
          <td>789</td>
          <td>951</td>
          <td><button type="button" class="btn btn-info">按钮</button><button type="button" class="btn btn-danger">按钮</button><button type="button" class="btn btn-link">按钮</button></td>
        </tr>
        <tr class="alert-warning">
          <td>123</td>
          <td>456</td>
          <td>789</td>
          <td>951</td>
          <td><button type="button" class="btn btn-lg">按钮</button><button type="button" class="btn btn-success">按钮</button><button type="button" class="btn">按钮</button></td>
        </tr>
      </table>
      <button type="button" class="btn btn-lg">按钮</button><button type="button" class="btn btn-primary">按钮</button><button type="button" class="btn btn-primary btn-sm">按钮</button><button type="button" class="btn btn-primary btn-lg btn-block">按钮</button>
    </div>
    
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

图片样式

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
     <div class="container">
       <img src="./wang.png" alt="wang" class="img-responsive">
       <img src="./wang.png" alt="wang" class="img-thumbnail">
       <img src="./wang.png" alt="wang" class="img-rounded img-responsive">
       <img src="./wang.png" alt="wang" class="img-circle img-responsive">

     </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

栅格系统----重点

基本样式

列偏移

嵌套列

三角图表和字体图标

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="glyphicon glyphicon-plus"></div>
      <div class="glyphicon glyphicon-minus"></div>

      <span class="caret"></span>
    </div>
   

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

  下拉标签

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">

      <div class="dropdown">
        <button  data-toggle="dropdown" class="btn btn-primary">
          百度一下<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li class="dropdown-header">55555</li>
          <li><a href="#">444</a></li>
          <li><a href="#">33</a></li>
          <li><a href="#">22</a></li>
          <li><a href=""></a>11</li>
          <li class="divider "></li>
          <li class="disabled"><a href="#"></a>11</li>
          <li ><a href="#"></a>11</li>
        </ul>
        </div>
      </div>
    </div>
   

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • java--反射原理及操作

    eadela
  • vuejs基础-v-for用法

    在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须使用v-for的同时,指定唯一的字符串/数字类型:key值

    eadela
  • vuejs基础-常见指令

    在VM实例中,如果想要获取data上的数据,或者想要掉哦用methods中的方法,必须通过this.数据属性名或者this.方法名来进行访问,这里的this,就...

    eadela
  • 如何利用 gulp 压缩混淆 “上古”时期的项目文件

    还是那些传统的方式,一个页面从上到下引入几十个「js」文件,里面到处充斥着 jquery 的 DOM 操作,维护起来相当的糟糕,变量与函数之间跨文件引用。

    六小登登
  • Prometheus在京东开源项目ChubaoFS中的使用

    在我的印象中,普罗米希修斯是古希腊神话中的最具智慧之神,不仅创造了人类,还给人类带来了火。同样Prometheus项目也是非常优秀的项目,很早就引起了我们的兴趣...

    CNCF
  • 新一代基于大数据的管理信息系统(MIS)报表需求开发

    2.然后通过将数据在后台(主要使用java)封装成前台需要的格式(一般是json格式),这一步中包含了service,DAO,spring配置以及使用,stru...

    MickyInvQ
  • 如何扩展单个Prometheus实现近万Kubernetes集群监控?

    作者黄雷,腾讯云工程师,曾负责构建腾讯云云监控新一代多维业务监控系统,擅长大规模分布式监控系统设计,对golang后台项目架构设计有较深理解,后加入TKE团队...

    腾讯云原生
  • 性能监控之初识 Prometheus

    Prometheus 是一套开源的监控、报警、时间序列数据库的组合,起始是由 SoundCloud 公司开发的,源于谷歌 borgmon。从 2016 年加入C...

    高楼Zee
  • 0832-如何安装及使用Prometheus

    Prometheus 是一个具有维度数据模型,灵活的查询语言,高效的时间序列数据库和现代警报方法的开源监视系统。

    Fayson
  • java应用监控之prometheus核心组件

    上一篇我们对prometheus做了一个简单的介绍,介绍了prometheus的优势以及和其他监控系统的对比,今天分享一下prometheus的核心组件。

    用户4361942

扫码关注云+社区

领取腾讯云代金券