初涉Bootstrap——简介

2019年9月14日 229次阅读 来源: Queen

Bootstrap —— 简介

介绍

《初涉Bootstrap——简介》

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

官网：http://getbootstrap.com/

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

PS：尽量去官网下载

由于此插件基于Jquery，所以引入jquery是必要的

下载

《初涉Bootstrap——简介》

Bootstrap：最小化完整版本
Source code：包含了Less、Javascript的source和一些fonts库
Sass：使用Sass编译JS可用

此次学习主要围绕最小化版本进行

《初涉Bootstrap——简介》

  • 接入网络，可直接赋值粘贴绝对URL便可引入Bootstrap

关于CDN请看各路大神回答：CDN是什么？使用CDN有什么优势？

Bootstrap文件结构

《初涉Bootstrap——简介》

  • 后缀min表示经过亚索的文件

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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

开发工具：

  • notepad++

  • DW cs6

  • HBuilder

  • webstorm

  • ……

PS：从本人接触网页设计一来，第一次敲HTML标签的那天我用的就是记事本，后转HBuilder。

第一个网页

官网有实例精选，可以打开看看 —— 略

    原文作者：Queen
    原文地址: https://segmentfault.com/a/1190000009152328
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞