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链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
JS中表单的使用小结
Jan 11 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
原生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获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
pandas 对group进行聚合的例子
2019/12/27 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
python_mask_array的用法
2020/02/18 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
家长会主持词
2014/03/26 职场文书
元旦联欢会主持词
2014/03/26 职场文书
初三新学期计划书
2014/05/03 职场文书
考试保密承诺书
2014/08/30 职场文书
管理失职检讨书范文
2015/05/05 职场文书