初入前端框架bootstrap--Web前端

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

初入前端框架bootstrap--Web前端

解压后的Bootstrap文件夹:

初入前端框架bootstrap--Web前端

2、下载jquery.js jQuery官网:https://jquery.com/download/

初入前端框架bootstrap--Web前端

笔者对Bootstrap框架以及jquery进行了收集,你可直接下载bootstrap-3.3.7-dist.zipjQuery.zip(当前时间最新版) 3、你需要把jQuery.js放入js文件夹中

初入前端框架bootstrap--Web前端

4、在html中引入框架文件(以下两种方式可以按需选择) 1)引入本地文件 bootstrap.min.css:   <link href="http://www.likecs.com/css/bootstrap.min.css"> bootstrap.min.js:   <script src="http://www.likecs.com/js/bootstrap.min.js"></script> jquery-3.2.1.min.js:   <script src="http://www.likecs.com/js/jquery-3.2.1.min.js"></script> 2)引入网络上文件 使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议),即引入网络上的文件,需要电脑联网。 bootstrap.min.css: <linkhref="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> bootstrap.min.js: <script src="http://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 content="width=device-width, initial-scale=1"> 6、最终的html文件 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bootstrap</title>
  <meta content="width=device-width, initial-scale=1">
  <link href="css/bootstrap.min.css">
</head>
<body>
</body>
<script src="http://www.likecs.com/js/jquery-3.2.1.min.js"></script>
<script src="http://www.likecs.com/js/bootstrap.min.js"></script>
</html> 图示:

初入前端框架bootstrap--Web前端

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzjswz.html