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 相关文章推荐
JavaScript加强之自定义event事件
Sep 21 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
js控制分页打印、打印分页示例
2014/02/08 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
微信小程序日历效果
2018/12/29 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
详解Python流程控制语句
2020/10/28 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
自我鉴定的范文
2013/10/03 职场文书
前台文员岗位职责
2013/12/28 职场文书
护理个人求职信范文
2014/01/08 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
公司合并协议书范本
2014/09/30 职场文书
买房子个人收入证明
2014/10/12 职场文书
政风行风评议工作总结
2014/10/21 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
乐山大佛导游词
2015/02/02 职场文书
初婚初育证明范本
2015/06/18 职场文书
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL