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/

  • 相关阅读:
    pycharm上运行django服务器端、以及创建app方法
    Python实现淘宝秒杀聚划算自动提醒源码
    Python版:Selenium2.0之WebDriver学习总结_实例1
    windows上使用pip下载东西时报编码错误问题解决方法
    模块购物商城和ATM机代码:
    Python网页信息采集:使用PhantomJS采集淘宝天猫商品内容
    android用户界面之ProgressBar教程实例汇总
    推荐12个亲测Android开发源码(包括应用、游戏、效果等等)
    Android开发各种demo集合
    Android Service
  • 原文地址:https://www.cnblogs.com/fan-bk/p/8183583.html
Copyright © 2011-2022 走看看