zoukankan      html  css  js  c++  java
  • Bootstrap3快速使用

    在2017年8月下旬,Bootstrap团队发布了Bootstrap 4 alpha版,以下内容是使用Bootstrap3。

    移动设备优先

    自Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。

    Bootstrap网格系统

    Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

    html模板

    使用以下html模板快速使用Bootstrap3,注意若要使用Bootstrap的JavaScript插件,一定要先引入 jQuery.js,再引入bootstrap.js。

    <!DOCTYPE html>
    <html>
       <head>
          <title>Bootstrap 模板</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <!-- 引入 Bootstrap -->
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     
          <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
          <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
          <!--[if lt IE 9]>
             <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
             <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
          <![endif]-->
       </head>
       <body>
     
          <!-- 注意:jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
          <script src="https://code.jquery.com/jquery.js"></script>
          <script src="js/bootstrap.min.js"></script>
       </body>
    </html>
    
    

    Bootstrap风格

    如下图所示,Bootstrap3如果不自己定制css,通常就是如下6个颜色的组件。

    类名包含 颜色
    default 灰白
    primary 深蓝
    success 绿
    info 天蓝
    warning 橘红
    danger 西瓜红

    参考资料

    Bootstrap 教程 _ 菜鸟教程 http://www.runoob.com/bootstrap/bootstrap-tutorial.html
    Bootstrap 可视化布局系统 http://www.runoob.com/try/bootstrap/layoutit/
    Bootstrap 可视化布局系统-旧 http://www.runoob.com/try/bootstrap/layoutit/index_old.html

  • 相关阅读:
    算法中时间复杂度概括——o(1)、o(n)、o(logn)、o(nlogn)
    Docker笔记
    struts框架
    引包问题
    官网下载
    WebService
    答辩问题整理
    小程序转发功能的实现
    小程序自定义组件及传值
    vue 点击下拉框
  • 原文地址:https://www.cnblogs.com/gleamer/p/startbootstrap3.html
Copyright © 2011-2022 走看看