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 11 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
原生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还会继续执行么
2016/05/17 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python用for循环实现九九乘法表
2018/05/31 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
WxPython实现无边框界面
2019/11/18 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
pyspark 随机森林的实现
2020/04/24 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
求职简历自荐信范文
2013/10/21 职场文书
新年爱情寄语
2014/04/08 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
邀请书格式范文
2015/02/02 职场文书
小学体育课教学反思
2016/02/16 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
MySQL读取JSON转换的方式
2022/03/18 MySQL