Bootstraps是一种简洁、直观、强悍的前端开发框架，它让web开发更迅速、简单。对于初入Bootstrap的小白，高效进入主题很重要，能为我们节省很多时间，下面我将对使用Bootstrap开发前应该做什么做出详细指引，初学者可以围观一下，大神可以忽略哦！

1、下载Bootstrap框架

Bootrap：http://getbootstrap.com/2.3.2/getting-started.html

Bootrap中文网：http://v3.bootcss.com/getting-started/#download

解压后的Bootstrap文件夹：

2、下载jquery.js

jQuery官网：https://jquery.com/download/

笔者对Bootstrap框架以及jquery进行了收集，你可直接下载bootstrap-3.3.7-dist.zip，jQuery.zip（当前时间最新版）

3、你需要把jQuery.js放入js文件夹中

4、在html中引入框架文件（以下两种方式可以按需选择）

1)引入本地文件

bootstrap.min.css：

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

bootstrap.min.js：

　　<script src="js/bootstrap.min.js"></script>

jquery-3.2.1.min.js：

　　<script src="js/jquery-3.2.1.min.js"></script>

2）引入网络上文件

使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议），即引入网络上的文件，需要电脑联网。

bootstrap.min.css：

<link rel="stylesheet"href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

bootstrap.min.js：

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

jQuery.js：

https://code.jquery.com/jquery-3.2.1.min.js

5、引入meta，实现屏幕适配

<meta name="viewport" content="width=device-width, initial-scale=1">

6、最终的html文件

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>bootstrap</title>
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>

图示：

初入前端框架bootstrap--Web前端的更多相关文章

  1. 想要入行web前端要知道web前端的的基本工作职责

    入一行,要先知一行 ”:我们来看看web前端开发职位 无论什么门派都要做到的一些基本工作职责 首先,你必须是一个合格的“页面仔”,这个叫法不好听,但很生动: 我们都知道,所有呈现的内容都是基于HTML ...

  2. 前端框架 bootstrap 的使用

    内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...

  3. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  4. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  5. 推荐web前端框架bootstrap

    bootstrap是基于Jquery而开发的一个前端框架. 全中文的学习网站:http://www.runoob.com/bootstrap/bootstrap-tutorial.html 实际上就是 ...

  6. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  7. 简洁灵活的前端框架------BootStrap

      前  言 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.[1] ...

  8. 前端框架——Bootstrap

    一.Bootstrap介绍 凡是使用过bootstrap的开发者,不外乎做这么两件事情:复制and粘贴. Bootstrap官方网址:http://www.bootcss.com Bootstrap, ...

  9. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  10. 最受欢迎的前端框架 —— Bootstrap学习

    Bootstrap是Twitter的Mark Otto和Jacob Thornton开发的,是目前最受欢迎的前端框架,它简单灵活,使得Web前端开发更加快捷方便. 首先,要基本掌握Bootstrap框 ...

随机推荐

  1. JSON入门看这一篇就够了

    什么是JSON JSON:JavaScript Object Notation [JavaScript 对象表示法] JSON 是存储和交换文本信息的语法.类似 XML. JSON采用完全独立于任何程 ...

  2. iOS学习——UIView的研究

    在iOS开发中,我们知道有一个共同的基类——NSObject,但是对于界面视图而言,UIView是非常重要的一个类,UIView是很多视图控件的基类,因此,对于UIView的学习闲的非常有必要.在iO ...

  3. python学习资料链接

    1.入门与量化:https://www.v2ex.com/t/257297

  4. C#写鞍点问题

    题目: 编写程序,找一找一个二维数组中的鞍点(即该位置上的元素值在行中最大,在列上最小.有可能数组没有鞍点). 要求 * 二维数组的大小.数组元素的值在运行时输入: * 程序有友好的提示信息 usin ...

  5. 微信小程序中不同页面间的参数传递

    从样式页面WXML向逻辑页面JS传递点击事件的响应函数中传递参数 <!--此为样式页面--> <block wx:for="{{postList}}" wx:fo ...

  6. I can do it

    If it doesn't challange you ,it won't change you.

  7. typedef介绍

    1.typedef是什么? typedef是C中的类似于extern/static的一个关键字,用于为一种类型引入一个新的名字.并不会分配内存. 2.typedef常见用法? 1) typedef i ...

  8. 时间序列数据库rrd启动

    然后执行启动定时任务目录:etc/crontab SHELL=/bin/bashPATH=/sbin:/bin:/usr/sbin:/usr/binMAILTO=rootHOME=/ # For de ...

  9. Mock摆脱后端拖拉（借鉴官网）（一）

    mock是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,帮助编写单元测试.mock有如下功能 根据数据模板生成模板数据 模拟ajax请求,生成请求数据 基于html模板生成模拟数据 下载安装 n ...

  10. 关于eclipse安装springide的记录

    近些天,又开始学习springmvc,使用eclipse进行开发,由于很多快捷键时候需要安装springide插件才能出来,我遇到配置DispatcherServlet,结果alt+/出不来Dispa ...