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. SDN第三次上机作业

    作业链接 1.创建以下拓扑(可采用任意方式) 2.利用OVS命令下发流表,实现VLAN功能 3.利用OVS命令查看流表 4.验证性测试 5.Wireshark抓包验证

  2. jenkins入门系列之一 jenkins的安装

    Jenkins是一个CI(持续集成环境)工具.它可以根据设定持续定期编译,运行相应代码:运行UT或集成测试:将运行结果发送至邮件,或展示成报告... 这样做的最终目的是: 让项目保持健康的状态.如果任 ...

  3. Hadoop源码学习之HDFS（一）

    Hadoop的HDFS可以分为NameNode与DataNode,NameNode存储所有DataNode中数据的元数据信息.而DataNode负责存储真正的数据(数据块)信息以及数据块的ID. Na ...

  4. shell编程之环境变量配置文件(4)

    1 source命令 修改了配置文件,并让它立刻生效,而不用重新登录 source 配置文件 或者 .配置文件 2 环境变量配置文件简介 PATH HISTSIZE PS1 HOSTNAME等环境变量 ...

  5. TensorFlow实战之实现自编码器过程

    关于本文说明,已同步本人另外一个博客地址位于http://blog.csdn.net/qq_37608890,详见http://blog.csdn.net/qq_37608890/article/de ...

  6. Ubuntu系统下crontab的使用

    最近一个项目,需要用到一个定时任务,先说crontab的常用命令. crontab -u //设定某个用户的cron服务,一般root用户在执行这个命令的时候需要此参数 crontab -l //列出 ...

  7. 5. 跟踪标记 (Trace Flag) 834, 845 对内存页行为的影响

    跟踪标记:834 功能: 在64位的windows环境下,为SQL Server开启这个跟踪标记,那么SQL Server 会使用大页(Large pages)为内存缓冲区(buffer pool)分 ...

  8. MysqL自动提交机制的关闭

    MysqL在执行一句数据库操作命令的时候,通常都是自动提交的.常用引擎下有两种,分别是MyIsam和InnoDB,MyIsam是不支持事务处理的,但InnoDB支持,但InnoDB在不开启事务处理的情 ...

  9. PHP操作Redis队列的方法

    入队: <?php $redis = new Redis(); $redis->connect('127.0.0.1',6379); while(True){ try{ $value = ...

  10. python模拟登录浙江大学彩云库

    前言: 群里一位朋友叫我帮他写 一个模拟登录的. 代码: import requests import time url="http://yk3.gokuai.com/web/index&q ...