zoukankan      html  css  js  c++  java
  • Bootstrap学习一

    1.官网地址:

    http://getbootstrap.com/ 

    2.使用和引入:

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     
    <!-- 可选的Bootstrap主题文件(一般不使用) -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
     
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
     
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    3.简单实例:

    <!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>
  • 相关阅读:
    CF1096C Polygon for the Angle
    CF1149A Prefix Sum Primes
    CF1153C Serval and Parenthesis Sequence
    leetcode134 Gas Station
    leetcode23 Merge k Sorted Lists
    leetcode982 Triples with Bitwise AND Equal To Zero
    CF1110C Meaningless Operations
    【bzoj4567】SCOI2016背单词
    【不定期更】【友链整理】
    【bzoj2006】NOI2010超级钢琴
  • 原文地址:https://www.cnblogs.com/pengsi/p/7921802.html
Copyright © 2011-2022 走看看