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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
关于JavaScript的一些看法
May 27 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
javascript头像上传代码实例
Sep 28 Javascript
js实现炫酷光感效果
Sep 05 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中的数据结构:DS扩展
2017/07/17 PHP
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python 实现链表实例代码
2017/04/07 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python交互式图形编程的实现
2019/07/25 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫