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 相关文章推荐
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
深入学习JavaScript对象
Oct 13 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
原生JS实现pc端轮播图效果
Dec 21 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Python SQLite3数据库操作类分享
2014/06/10 Python
python获得一个月有多少天的方法
2015/06/04 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
简单了解python代码优化小技巧
2019/07/08 Python
Django的Modelforms用法简介
2019/07/27 Python
python 6行代码制作月历生成器
2020/09/18 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
抽样调查项目计划书
2014/04/24 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android