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 相关文章推荐
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
vue的三种图片引入方式代码实例
Nov 19 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
Laravel事件监听器用法实例分析
2019/03/12 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
Java面试题汇总
2015/12/06 面试题
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
优秀员工评语
2014/02/10 职场文书
家长会学生演讲稿
2014/04/26 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
Python何绘制带有背景色块的折线图
2022/04/23 Python