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 相关文章推荐
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
js处理表格对table进行修饰
May 26 Javascript
javaScript基础语法介绍
Feb 28 Javascript
JS排序之选择排序详解
Apr 08 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
详解Angular cli配置过程记录
Nov 07 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与MySQL交互使用详解
2006/10/09 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
查看django版本的方法分享
2018/05/14 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python实现图片九宫格分割
2021/03/07 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
tensorflow多维张量计算实例
2020/02/11 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Python PyQt5整理介绍
2020/04/01 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
资产评估专业学生的自我鉴定
2013/11/14 职场文书
员工离职证明范本
2015/06/12 职场文书
在职证明书模板
2015/06/15 职场文书
孙振耀退休感言
2015/08/01 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电