BootStrap前端框架使用方法详解


Posted in Javascript onFebruary 26, 2020

1.概念:

Bootstrap,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。

好处:

  • 1.定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
  • 2.响应式布局。

同一套页面可以兼容不同分辨率的设备。

2.使用步骤:

1.下载Bootstrap,官网地址:https://v3.bootcss.com

BootStrap前端框架使用方法详解

2.在项目中将这三个文件夹复制

BootStrap前端框架使用方法详解

3.创建html页面,引入必要的资源文件

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
      <title>Bootstrap HelloWorld</title>
    
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
    
    
      <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
      <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    <h1>你好,世界!</h1>
    
    </body>
    </html>

4.然后就可以去官网上copy你想要的组件啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.documentElement和document.body区别介绍
Sep 16 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 #Javascript
javascript 数组精简技巧小结
Feb 26 #Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 #Javascript
jquery实现直播视频弹幕效果
Feb 25 #jQuery
JavaScript实现打砖块游戏
Feb 25 #Javascript
深入理解Antd-Select组件的用法
Feb 25 #Javascript
京东优选小程序的实现代码示例
Feb 25 #Javascript
You might like
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python多线程编程简单介绍
2015/04/13 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
python3.x上post发送json数据
2018/03/04 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python 基于opencv去除图片阴影
2021/01/26 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
课内比教学心得体会
2014/09/09 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
毕业赠语大全
2015/06/23 职场文书
公司庆典主持词
2015/07/04 职场文书
教师反邪教心得体会
2016/01/15 职场文书
修辞手法有哪些?
2019/08/29 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书