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>
  • 相关阅读:
    hp一體機cartridge error及carriage jam4/22
    指纹仪zkonline.ocx:access violation...4/13
    IIS6:Service Unaviable 9/27
    寶寶的成長腳印3/15
    vs2003不能调试4/8
    C++ 的复制构造函数
    导入与导出数据 大容量复制程序(bcp)
    关于SQlserver数据库的加密应用
    DataGridView使用技巧
    使用C# 向记事本窗口发送消息
  • 原文地址:https://www.cnblogs.com/pengsi/p/7921802.html
Copyright © 2011-2022 走看看