编程 Javascript

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你想要的组件啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

BootStrap前端框架使用方法详解

- Author -

遍唱阳春

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js表格分页实现代码

Sep 18 Javascript

ASP.NET MVC中EasyUI的datagrid跨域调用实现代码

Mar 14 Javascript

jquery遍历checkbox的注意事项说明

Feb 21 Javascript

JS实现双击内容变为可编辑状态

Mar 03 Javascript

最基础的vue.js双向绑定操作

Aug 23 Javascript

vue实现页面加载动画效果

Sep 19 Javascript

Angularjs渲染的 using 指令的星级评分系统示例

Nov 09 Javascript

JavaScript中的一些隐式转换和总结(推荐)

Dec 22 Javascript

前端面试知识点目录一览

Apr 15 Javascript

将RGB值转换为灰度值的简单算法

Oct 09 Javascript

element el-tree组件的动态加载、新增、更新节点的实现

Feb 27 Javascript

jQuery 移除事件的方法

Jun 20 jQuery

原生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 高性能书写

2010/12/11 PHP

php的一个简单加密解密代码

2014/01/14 PHP

PHP利用func_get_args和func_num_args函数实现函数重载实例

2014/11/12 PHP

PHP集成百度Ueditor 1.4.3

2014/11/23 PHP

PHP文件操作方法汇总

2015/07/01 PHP

thinkPHP5框架中widget的功能与用法详解

2018/06/11 PHP

Swoole源码中如何查询Websocket的连接问题详解

2020/08/30 PHP

javascript getElementsByClassName函数

2010/04/01 Javascript

jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)

2012/05/24 Javascript

IE关闭时判断及AJAX注销案例学习

2013/02/18 Javascript

JQuery 操作/获取table具体代码

2013/06/13 Javascript

jquery.validate的使用说明介绍

2013/11/12 Javascript

js使用eval解析json(js中使用json)

2014/01/17 Javascript

JavaScript运行时库属性一览表

2014/03/14 Javascript

jquery实现兼容IE8的异步上传文件

2015/06/15 Javascript

javascript获取当前的时间戳的方法汇总

2015/07/26 Javascript

javascript实现很浪漫的气泡冒出特效

2020/09/05 Javascript

JS实现数字格式千分位相互转换方法

2016/08/01 Javascript

js实现文字超出部分用省略号代替实例代码

2016/09/01 Javascript

javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

2016/12/15 Javascript

Vue element-ui父组件控制子组件的表单校验操作

2020/07/17 Javascript

理解JavaScript中的对象

2020/08/25 Javascript

[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22

2020/11/24 DOTA

用生成器来改写直接返回列表的函数方法

2017/05/25 Python

Django中的CBV和FBV示例介绍

2018/02/25 Python

Python-Tkinter Text输入内容在界面显示的实例

2019/07/12 Python

python装饰器原理与用法深入详解

2019/12/19 Python

Python读取VOC中的xml目标框实例

2020/03/10 Python

python脚本使用阿里云slb对恶意攻击进行封堵的实现

2021/02/04 Python

DKNY品牌官网：纽约大都会时尚风格

2016/10/20 全球购物

世界上最大的皮肤科医生拥有和经营的美容网站：LovelySkin

2021/01/03 全球购物

经理任命书模板

2014/06/06 职场文书

少先队活动总结

2014/08/29 职场文书

Html5新增了哪些功能

2021/04/16 HTML / CSS

Python移位密码、仿射变换解密实例代码

2021/06/27 Python

Python创建SQL数据库流程逐步讲解

2022/09/23 Python