Bootstrap ——简介和环境学习博客（一）

最新推荐文章于 2023-04-22 07:37:57 发布

星星也会数人类嘛

最新推荐文章于 2023-04-22 07:37:57 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： Bootstarp 环境

本文链接：https://blog.youkuaiyun.com/qq_42627162/article/details/99542291

Bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍Bootstrap，一个流行的前端框架，用于快速开发响应式网站。它由Twitter开发，自2011年起开源，支持移动优先设计，兼容主流浏览器，易上手且包含丰富的组件。文章覆盖了Bootstrap的下载、安装及基本使用。

Bootstarp简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

优点：

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
(Internet Explorer 、 Firefox 、Opera 、 Google Chrome 、Safari)
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

Bootstarp环境

官方下载地址: http://getbootstrap.com
中文下载地址: www.bootcss.com
在这里插入图片描述
点击Download后进入下载页面

预编译结构如下:

源码结构：

预编译文件可以直接使用到任何 web 项目中。模板:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<title>bootstrap 模板</title>
	
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
 
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- js文件一定要在jquery文件之前导入 且必须在bootstrap.js文件之前,且版本必须匹配 最好放在最下面最后加载-->
	<script src="bootstrap/js/bootstrap.js"></script>
	<script src="bootstrap/js/jquery-3.1.0.min.js"></script>
</body>
</html>

直接使用CDN:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<title>Bootstrap 101 Template</title>
	
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- 包含jQuery和Popper.js的CDN版本 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

也可以使用Staticfile CDN 上的库：

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>