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. 关于WebApi 跨域问题的解决的方式

    最近在做WebApi 进行开发的时候 一直会遇到跨域方面的问题那么如何进行跨域问题其实非常的简单. 1.一直在使用WebApi的时候总是遇到跨域的问题 那么 什么是跨域?跨域,指的是浏览器不能执行其他 ...

  2. 《Web Scraping With Python》Chapter 1的学习笔记

    urllib urllib是python library自带的库,可以直接用. urlopen from urllib.request import urlopen html = urlopen(&q ...

  3. 【算法】哈希表的诞生（Java）

    参考资料 <算法(java)>                           — — Robert Sedgewick, Kevin Wayne <数据结构>       ...

  4. php复习整理1--位运算符

    前言    子曰:"温故而知新,可以为师矣." php复习整理系列即是对已掌握的知识的温习,对久不使用的知识点进行重新学习,从而对php基础知识的掌握更加牢固.当然因为是重新温习, ...

  5. scope_lock与lock_guard区别

    lock_guard:更加灵活的锁管理类模板,构造时是否加锁是可选的,在对象析构时如果持有锁会自动释放锁,所有权可以转移.对象生命期内允许手动加锁和释放锁. scope_lock:严格基于作用域(sc ...

  6. 读书共享 Primer Plus C-part 5

    第五章 运算符.表达式和语句 关于+- 的一元运算符和二元运算符的区别 a++:a先创建自身的一个副本,然后a自增1,最后返回副本的值 a+=1: 事实上相当于++a a=a+1: 虽然有点雷同于a+ ...

  7. css里面如何设置body背景图片满屏

    @{    Layout = null;    ViewBag.Title = "Login Page";} <!DOCTYPE html> <html>& ...

  8. 802.1X和NAP整合实验手册

    实验描述 公司内部有多个部门,创建了域的架构,并搭建了DHCP服务器和Radius服务器,要求每个部门都独享一个网段,实现每位用户插上网线后,跳出窗体进行身份验证,如果用户通过验证,根据用户所在的部门 ...

  9. [翻译] .NET Core 2.1 Preview 1 发布

    [翻译] .NET Core 2.1 Preview 1 发布 原文: Announcing .NET Core 2.1 Preview 1 今天,我们宣布发布 .NET Core 2.1 Previ ...

  10. Ｃ#中ASCII码学习心得

    1.利用调用ASCIIEncoding类来实现各种转换.如简单个ACS码和int转换. ***利用(int)ASCIIEncoding类对象.GetBytes(character)[0]得到整数: p ...