Bootstrap介绍


一、Bootstrap简介

Bootstrap是Twitter于2011年8月在Github上发布的的开源产品,目前最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备有限的WEB项目。将常见的CSS布局组件和JavaScript插件进行了整合并完善的封装,能让没有经验的前端工程师后后端工程师都迅速掌握和使用,大大提高开发效率。

二、常用版本介绍

目前使用较广的是版本2、3和4,其中2的最新版本的是2.3.2,3的最新版本是3.4.1,4的最新版本是4.6,这里主要说一下4版本,在2018年1月下旬,Bootstrap团队发布了Bootstrap 4 正式版,4的最主要变化包括以下方面:

  • 从 Less 迁移到 Sass
  • 改进网格系统
  • 缺省弹性框支持
  • Dropped wells, thumbnails, and panels for cards
  • 合并所有 HTML resets 到一个新的模块中:Reboot
  • 全新自定义选项
  • 不再支持 IE8
  • 重写所有的 JavaScript 插件
  • 改进工具提示和 popovers 的自动定位
  • 改进文档
  • 其他大量改进

三、bootstrap有什么优点?

浏览器支持:

  • 目前主流的浏览器均支持bootstrap

容易上手:

  • 只要您具备 HTML 和 CSS 的基础知识,就可以学习使用Bootstrap。

快速开发:

  • bootstrap给我提供了大量的样式,布局解决方案和插件库,可以让程序员从基本的样式设计和调试上解放,快速搭建项目.同时bootstrap还给我们提供了大量的常用网页组件,可以让我们直接复制代码运行即可

响应式设计:

  • Bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机。

注意:从 Bootstrap 3开始,框架包含了贯穿于整个库的移动设备优先的样式。

四、bootstrap下载

官网:http://getbootstrap.com/

中文网:http://www.bootcss.com

由于此插件基于Jquery,所以必须引入jQuery

 

Bootstrap:最小化完整版本
Source code:包含了Less、Javascript的source和一些fonts库

HTML标准模版

使用Bootstrap的前提(按优先级)

  1. 标准HTML5文档结构

  2. 移动设备优先

  3. Bootstrap css引入

  4. Jquery引入

  5. Bootstrap js引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstarp</title>

    <!--Bootstrap-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!--jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边)-->
    <script src="js/jquery-3.5.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM