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>

图示：

转载于:https://www.cnblogs.com/qikeyishu/p/7534885.html

初入前端框架bootstrap--Web前端相关推荐

  1. php前端开发培训,杭州web前端培训技术学校(web前端开发和php开发)

    杭州web前端培训技术学校,选择的时候请记住杭州web前端培训中的web前端框架,web前端开发和ui设计,web前端开发和php开发,web前端开发好不好,学历低能否学习web前端,web适用那些人 ...

  2. 五款轻量级的web前端框架和H5前端框架

    目前主流的web前端框架有:Bootstrap.妹子UI.MUI移动前端框架等之外,国内的一些前端大神和前端大神团队琢磨出了以下几个不错的web前端框架. 第一款前端框架:FrozenUI – 专注于 ...

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

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

  4. 前端框架 Bootstrap 4.5.2 发布

    前端框架 Bootstrap 4.5.2 发布了,此版本主要解决了以下两个问题: 恢复 make-container-max-widths mixin.它将保留在 v4 的代码库中. 从 .row 移 ...

  5. 前端框架 Bootstrap 4.4.0 发布

    前端框架 Bootstrap 4.4.0 发布了,以下是更新内容: 新的响应式 .row-cols 类,用于快速指定跨断点的列数 新的 escape-svg() 函数,可简化用于表单等的嵌入式背景图像 ...

  6. 前端框架——bootstrap/knockoutjs/angularjs

    前端框架--bootstrap/knockoutjs/angularjs 转载于:https://blog.51cto.com/caochun/1854522

  7. 前端框架BootStrap之柱状图模板

    前端框架BootStrap之柱状图模板 写在前面:有段时间没更新博客了.本身是Java后端的.但是公司限制.后端在写.安卓在写.前端也在写.前端也和安卓一样比较菜,有不足的地方望路过的大佬指正.最近做 ...

  8. 入行IT学习web前端的优势

    近年来学习IT的越来越多,所以企业招聘标准也有所提高.而一般的求职者尤其是应届生,缺乏工作经验,很难获得名企青睐.所以求职者们掌握一门专业技术是非常必要的!随着现代经济技术的发展,中国IT行业已经步入 ...

  9. 开发web前端_移动前端开发和web前端开发的区别？

    如果说非要有区别的话应该就是开发的软件和方式不同,因为他们本来就不属于一端的东西,具体来看看下面: web前端开发 用最简单粗暴的方式来讲,就是用html + css + javascript来构建一 ...

  10. 好程序员web前端干货之web前端开发框架汇总

    好程序员web前端干货之web前端开发框架汇总,其实一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们.前端开发框架有很多,其中有一些写得 ...

最新文章

  1. centos iptables关于ping
  2. HESSIAN 海森矩阵
  3. 关于Exchange Server 2010中OWA页面无法打开问题处理方法
  4. stn算子_在 Excel 中,公式都是以 ____________ 开始的,后面由操作数和运算符构成。...
  5. 加速创业大礼包欢迎领取：对接微软客户、免费技术资源、深入对接一线资本、助力品牌建设...
  6. 科大讯飞语音助手Lite智能鼠标电脑版安装不成功为什么？怎么办？
  7. Python爬虫初学（三）—— 模拟登录知乎
  8. 牛客网 【每日一题】7月24日题目精讲—小A的柱状图
  9. dnf时装预览怎么打开_DNF:史上最好看时装上线,大佬已经玩疯,全服都是真香的气息...
  10. CNCC2017中的深度学习与跨媒体智能
  11. 【Python笔记】datetime 模块用法
  12. jquery-validation 使用
  13. 东财mysql作业_20春东财《MySQL数据库系统及应用》单元作业三（答案100分）
  14. JAVA的对象创建与调用的内存解析
  15. 阿里云 蚂蚁支付宝 钉钉 c++ 面经
  16. bpsk在瑞利信道matlab,请教BPSK在瑞利信道下的误码率仿真
  17. java 判断浏览器_Java怎么判断访问者使用的是360浏览器
  18. Ubuntu 配置固定IP方法
  19. 凝思Linux6.0.60安装卸载NVIDIA显卡驱动
  20. Unity3D插件 Doozy UI 学习（一）：打开一个面板

热门文章

  1. mysql 游标中实现递归_mysql中实现递归查询？
  2. spring mysql中文乱码问题_解决Spring下MySQL出现乱码的问题
  3. 应届生想要获取web前端开发岗位？这份技能攻略，面试攻略别错过
  4. 链式调用方法的实现原理和方法
  5. java 快速从树节点找到数据_数据结构与算法：单向链表和双向链表
  6. python软件名字_python怎么获得文件夹名字
  7. pymysql安装_centos7.6 安装openstack stein组件之四
  8. python随机猜数字游戏_Python小游戏——猜数字教程（random库教程）
  9. c语言程序与实验系统,C/C ++程序设计学习与实验软件系统v2019 最新版下载_云间下载...
  10. vjudge-Knight Moves（bfs）