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. 【转】JavaScript的三种消息框alert，confirm，prompt

    1. alert是弹出警告框,在文本里面加入\n就可以换行.2. confirm弹出确认框,会返回布尔值,通过这个值可以判断点击时确认还是取消.true表示点击了确认,false表示点击了取消.3. ...

  2. 模拟器配置使用Fildder进行抓包，包含Https+证书

    1.首先,百度检索.参考别人的,大致上都是到安装证书就失败了.我后面只说几个关键点. 2.安装证书,必须设置屏幕密码.我最开始使用把cef拷贝到,手机结果出现bug,安装不了.后来采用了在手机内部访问 ...

  3. Java DecimalFormat 用法

    Java 提供 DecimalFormat 类,帮你用最快的速度将数字格式化为你需要的样子.下面是一个例子: importjava.text.DecimalFormat; publicclassTes ...

  4. Spring Task定时任务Scheduled

    Spring的任务调度,采用注解的形式 Spring中@Scheduled的用法. spring的配置文件如下,先扫描到任务的类,打开spirng任务的标签 <beans xmlns=" ...

  5. [Python Study Notes]匿名函数

    Python 使用 lambda 来创建匿名函数. lambda这个名称来自于LISP,而LISP则是从lambda calculus(一种符号逻辑形式)取这个名称的.在Python中,lambda作 ...

  6. Python数据分析学习-re正则表达式模块

    正则表达式 为高级的文本模式匹配.抽取.与/或文本形式的搜索和替换功能提供了基础.简单地说,正则表达式(简称为 regex)是一些由字符和特殊符号组成的字符串,它们描述了模式的重复或者表述多个字符,于 ...

  7. 集合的综合练习：Poker牌

    /* 刘意教程示例:*/ package cn.onecool.cot; import java.util.ArrayList; import java.util.Collections; impor ...

  8. Fiddler使用简单介绍

     一,fiddler简介 1.1,什么是fiddler Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出&qu ...

  9. ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。

    首先看一下我要解决的问题,第一张图是正常的情况下,第二张图是点击了输入框之后的情况,就是要解决此问题~! 百度了一下解决方法,好像有以下的一些方法: 1. iscroll 2. Jquery Mobi ...

  10. Egret学习笔记 (Egret打飞机-4.添加主角飞机和实现飞行效果)

    今天继续写点击了开始之后,添加一个飞机到场景中,然后这个飞机的尾巴还在冒火的那种感觉 先拆解一下步骤 1.首先完成飞机容器的图片加载 2.然后把容器添加到场景中 3.然后实现动画 -首先,我们新建一个 ...