zoukankan      html  css  js  c++  java
  • bootstrap 基础

    bootstrap 是一个响应式 前端框架

    新建一个html 引入代码

    可以在线链接:

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    或者进入官网下载:

    https://v3.bootcss.com/getting-started/

    实例代码:

    <!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="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="http://cdn.static.runoob.com/libs/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 编码规范:

    http://codeguide.bootcss.com/

  • 相关阅读:
    SkylineGlobe 如何实现绘制圆形Polygon和对图层的圆形范围选择查询
    如何修改Oracle服务IP地址
    TerraGate软件安装后,不能启动的解决办法
    SkylineGlobe SFS发布的WFS和WMS服务测试
    SkylineGlobe 如何实现二次开发加载KML文件
    如何屏蔽SkylineGlobe提供的三维地图控件上的快捷键
    SkylineGlobe 如何实现FlyTo定位到目标点之后触发的事件函数
    转子百度知道:LTE上行采用DC子载波,而下行置零,为什么?
    转载:LTE小区搜索过程
    dB dBc dBi dBd dBm dBW 定义
  • 原文地址:https://www.cnblogs.com/fan-bk/p/8183583.html
Copyright © 2011-2022 走看看