BootStrap框架的简单入门使用

0x01.关于BootStrap

  • Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
  • BootStrap是响应式布局。

0x02.导包使用

现在BootStrap下载使用的文件:https://v3.bootcss.com/

在这里插入图片描述解压文件后你将得到以下三个文件:

在这里插入图片描述将这些复制粘贴进工作目录。

在这里插入图片描述
还需要下载jquery的文件,并放入js文件中:

在这里插入图片描述
然后在html文件中导入css和js文件,如下:

<!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 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" 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>


</body>
</html>

0x03.简单的使用

初期的简单使用只需要看BootStrap的中文网,就可以轻松使用很多样式啦~

https://v3.bootcss.com/

在这里插入图片描述
更多使用说明,关注后续博客。

ATFWUS --Writing By 2020–04-02

发布了193 篇原创文章 · 获赞 216 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/ATFWUS/article/details/105278369