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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
浅谈vue权限管理实现及流程
Apr 23 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以post形式发送xml的方法
2014/11/04 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
javascript内存管理详细解析
2013/11/11 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
详解javascript遍历方式
2015/11/11 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
js实现微信聊天效果
2020/08/09 Javascript
python3大文件解压和基本操作
2017/12/15 Python
Python中反射和描述器总结
2018/09/23 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
python中的global关键字的使用方法
2019/08/20 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python通过len函数返回对象长度
2020/10/22 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
int和Integer有什么区别
2013/05/25 面试题
青年创业培训欢迎词
2014/01/10 职场文书
请假条怎么写
2014/04/10 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
医学会议开幕词
2016/03/03 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server
利用Python实现模拟登录知乎
2022/05/25 Python
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python