初涉Bootstrap——简介

最新推荐文章于 2024-08-30 22:17:40 发布

weixin_34360651

最新推荐文章于 2024-08-30 22:17:40 发布

阅读量89

点赞数

文章标签： javascript 前端后端 ViewUI

原文链接：https://segmentfault.com/a/1190000009152328

版权

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：最小化完整版本
Source code：包含了Less、Javascript的source和一些fonts库
Sass：使用Sass编译JS可用

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

图片描述

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

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

Bootstrap文件结构

图片描述

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

HTML标准模版

使用Bootstrap的前提（按优先级）

标准HTML5文档结构
移动设备优先
Bootstrap css引入
Jquery引入
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。

第一个网页

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

weixin_34360651

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初涉Bootstrap——简介

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

扫一扫