BootStrap前端框架使用方法详解

 更新时间:2020年02月26日 12:06:49   作者:遍唱阳春  
这篇文章主要介绍了BootStrap前端框架使用方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1.概念:

Bootstrap,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。

好处:

  • 1.定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
  • 2.响应式布局。

同一套页面可以兼容不同分辨率的设备。

2.使用步骤:

1.下载Bootstrap,官网地址:https://v3.bootcss.com

2.在项目中将这三个文件夹复制

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实现通过滑块改变网页颜色

    这篇文章主要为大家详细介绍了JavaScript实现通过滑块改变网页颜色,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 详解微信小程序之一键复制到剪切板

    详解微信小程序之一键复制到剪切板

    这篇文章主要介绍了微信小程序一键复制到剪切板,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javascript实现图片左右滚动效果【可自动滚动,有左右按钮】

    javascript实现图片左右滚动效果【可自动滚动,有左右按钮】

    这篇文章主要介绍了javascript实现图片左右滚动效果,可实现自动滚动,带有左右按钮功能,基于插件scrollPic.js实现,附带了相应的demo源码供读者下载参考,需要的朋友可以参考下
    2016-09-09
  • javascript日期计算实例分析

    javascript日期计算实例分析

    这篇文章主要介绍了javascript日期计算,涉及javascript针对日期计算的相关技巧,这里需要注意索引的使用,需要的朋友可以参考下
    2015-06-06
  • 用JavaScrpt实现文件夹简单轻松加密的实现方法图文

    用JavaScrpt实现文件夹简单轻松加密的实现方法图文

    电脑里经常会存储着重要文件,这些文件需要进行加密,有许多方法来实现。但如果想对一个文件夹里的所有文件都进行加密,数量少还可以,要是数量多岂不是得把人累死?
    2008-09-09
  • 微信小程序自定义波浪组件使用方法详解

    微信小程序自定义波浪组件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序自定义波浪组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 原生JS发送异步数据请求

    原生JS发送异步数据请求

    这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 微信小程序基于movable-view实现滑动删除效果

    微信小程序基于movable-view实现滑动删除效果

    这篇文章主要介绍了微信小程序基于movable-view实现滑动删除效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • nodejs分离html文件里面的js和css的方法

    nodejs分离html文件里面的js和css的方法

    这篇文章主要介绍了nodejs分离html文件里面的js和css的方法,本文需要分离出一个html 文件里面的script 和style 里面的内容,然后单独生成js文件和css 文件,感兴趣的可以了解一下
    2019-04-04
  • 微信小程序基于canvas渐变实现的彩虹效果示例

    微信小程序基于canvas渐变实现的彩虹效果示例

    这篇文章主要介绍了微信小程序基于canvas渐变实现的彩虹效果,结合实例形式分析了微信小程序线性渐变及圆形渐变的相关实现技巧,需要的朋友可以参考下
    2019-05-05

最新评论