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 select控件的相关操作实现代码
Sep 14 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
个人小程序接入支付解决方案
May 23 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 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
德生PL550的电路分析
2021/03/02 无线电
php知道与问问的采集插件代码
2010/10/12 PHP
php中常用的预定义变量小结
2012/05/09 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
Python检测网站链接是否已存在
2016/04/07 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
浅析Python 条件控制语句
2020/07/15 Python
Python实现EM算法实例代码
2020/10/04 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
一些高难度的SQL面试题
2016/11/29 面试题
土木工程专业个人求职信
2013/12/05 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
银行贷款收入证明
2014/10/17 职场文书
工作推荐信模板
2015/03/25 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
药房管理制度范本
2015/08/06 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
Python如何让字典保持有序排列
2022/04/29 Python
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js