zoukankan      html  css  js  c++  java
  • Bootstrap前端框架快速入门专题

    1.Bootstrap简介

    Bootstrap,出自自 Twitter,是目前最受欢迎的前端框架。

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷。

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

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

     

    2.为什么要使用Bootstrap框架?

    在Bootstrap出现之前:

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

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

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

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

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

    浏览器支持:所有的主流浏览器都支持 Bootstrap。

     

    3.Bootstrap框架源码下载

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

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

    我们使用V3版本的Bootstrap,我们点击下载链接之后,看到如下三个下载类型,我们下载的是 “ 用于生产环境的Bootstrap ”。

     

     

    4.Bootstrap 包的内容

    基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解

    CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

    组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

    JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

    定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

     

    5.Bootstrap搭建的环境

    当您下载了 Bootstrap 的已编译的版本,解压缩 ZIP 文件,您将看到下面的文件/目录结构:

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

    源码可以看到已编译的 CSS 和 JS(bootstrap.*),以及已编译压缩的 CSS 和 JS(bootstrap.min.*)。同时也包含了 Glyphicons 的字体,这是一个可选的 Bootstrap 主题。

    处理依赖

    由于Bootstrap的某些组件依赖于jQuery,所以请确保下载对应版本的jQuery文件,来保证Bootstrap相关组件运行正常。

      例如:上面下载的Bootstrap版本是3.3.7,建议jQuery的版本应该是,3.2以上,或者最新的版本

      jQuery版本下载: https://jquery.com/download/

     

     

    6.HTML模板

    一个使用了 Bootstrap 的基本的 HTML 模板如下所示:

     

    <!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>
          <h1>Hello, world!</h1>
     
          <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
          <script src="https://code.jquery.com/jquery.js"></script>
          <!-- 包括所有已编译的插件 -->
          <script src="js/bootstrap.min.js"></script>
       </body>
    </html>

    7.正式开发咯(各种组件的使用)

    中文版本:https://v3.bootcss.com/getting-started/

    因为版本:https://getbootstrap.com/docs/4.3/layout/overview/

     

    前端开发工具合集:https://www.cnblogs.com/mashangsir/p/11285775.html

     

  • 相关阅读:
    JQuery中jqGrid分页实现
    给jqGrid数据行添加修改和删除操作链接(之一)
    jquery 更新了数据库后局部刷新
    JS图片另存为(转)
    RFID系统集成公司
    R语言数据文件读写
    matlab当前目录下的相对路径
    转载:勤奋在科研中究竟有多重要?
    大型网站的架构设计问题大型高并发高负载网站的系统架构
    大型网站运维探讨和心得
  • 原文地址:https://www.cnblogs.com/mashangsir/p/11284088.html
Copyright © 2011-2022 走看看