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学习笔记5 类和对象
Jan 11 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
js Dom实现换肤效果
Oct 21 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
配置支持SSI
2006/11/25 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
JavaScript 基本概念
2015/01/20 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
Angular 4 指令快速入门教程
2017/06/07 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
原生js实现购物车
2020/09/23 Javascript
Python执行时间的计算方法小结
2017/03/17 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
深入了解Django View(视图系统)
2019/07/23 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
室内设计专业毕业生求职信
2014/05/02 职场文书
岗位明星事迹材料
2014/05/18 职场文书
服务行业口号
2014/06/11 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python