zoukankan      html  css  js  c++  java
  • Bootstrap

    Bootstrap

    Bootstrap介绍

      Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

      它是为实现快速开发Web应用程序而设计的一套前端工具包。

      它支持响应式布局,并且在V3版本之后坚持移动设备优先。

    ​ 就是复制黏贴一把梭,htmlcssjs代码的封装组合

    为什么要使用Bootstrap?

      在Bootstrap出现之前:

      命名:重复、复杂、无意义(想个名字费劲)

      样式:重复、冗余、不规范、不和谐

      页面:错乱、不规范、不和谐

      在使用Bootstrap之后: 各种命名都统一并且规范化。 页面风格统一,画面和谐。

    Bootstrap下载

      官方地址:https://getbootstrap.com

      中文地址:http://www.bootcss.com/

      我们使用V3版本的Bootstrap,我们下载的是用于生产环境的Bootstrap。

    Bootstrap环境搭建

    目录结构

    bootstrap-3.3.7-dist/ 
    ├── css  // CSS文件
    │   ├── bootstrap-theme.css  // Bootstrap主题样式文件,官方提供的,一般不用
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
    │   ├── bootstrap-theme.min.css.map
    │   ├── bootstrap.css  //引用的时候,引用这一个或者下面那个bootstrap.min.css文件就可以了
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css  // 核心CSS样式压缩文件,其他的文件都是在这个核心文件的基础上加了一些其他的样式
    │   └── bootstrap.min.css.map
    ├── fonts  // 字体文件
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   └── glyphicons-halflings-regular.woff2
    └── js  // JS文件
        ├── bootstrap.js
        ├── bootstrap.min.js  // 核心JS压缩文件
        └── npm.js
    

    基本模板

    <!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>
    

    详细介绍

    Bootstrap的使用可参考:http://www.bootcss.com/

  • 相关阅读:
    how to pass a Javabean to server In Model2 architecture.
    What is the Web Appliation Archive, abbreviation is "WAR"
    Understaning Javascript OO
    Genetic Fraud
    poj 3211 Washing Clothes
    poj 2385 Apple Catching
    Magic Star
    关于memset的用法几点
    c++ 函数
    zoj 2972 Hurdles of 110m
  • 原文地址:https://www.cnblogs.com/tutougold/p/11570296.html
Copyright © 2011-2022 走看看