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创建和操作表格的函数集合
May 07 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
JavaScript生成随机验证码代码实例
Sep 28 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实现的功能是显示8条基色色带
2006/10/09 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python列表使用实现名字管理系统
2019/01/30 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Python 变量的创建过程详解
2019/09/02 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
公司面试感谢信
2014/02/01 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
体现团队精神的口号
2014/06/06 职场文书
员工生日会策划方案
2014/06/14 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL