web基础_Bootstrap_003

ABB测试笔记

已于 2022-01-26 11:02:27 修改

阅读量426

点赞数

分类专栏： web 文章标签： web

于 2022-01-21 18:03:58 首次发布

本文链接：https://blog.csdn.net/yulle/article/details/122626825

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Bootstrap: 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

什么是自适应响应式?
编写好的一套web代码在pc、平板、手机展示效果都不错，有一个自适应的过程。

为什么选择Bootstrap
主要优势：⽤于开发响应式布局、移动设备优先的 WEB 项⽬
应用范围广、开源免费、浏览器兼容性好；chrome中按了F12后，可以看到Dimensions的选择

中文网站：
https://www.bootcss.com/

安装：
与jQuery相似，有两种方式。一种是官网下载后放入自己项目对应的文件夹中；一种是cdn引用。

html代码：

<!DOCTYPE html>
<html>
   <head>
   	  <meta charset="utf-8">
     <!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->	
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!--
        viewport表示用户是否可以缩放页面；
        width指定视区的逻辑宽度；
        device-width指示视区宽度应为设备的屏幕宽度；
        initial-scale指令用于设置Web页面的初始缩放比例
        initial-scale=1则将显示未经缩放的Web文档
     -->
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
           <!-- 或者 
     <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">-->
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>
---------------------------------------
<!-- 新 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>

bootstrap中container类和container-fluid类的区别的区别：
简而言之，container会多个会随着浏览器宽度变化而变化的margin
（参考：https://blog.csdn.net/sinat_27088253/article/details/50985432）

参考：https://blog.csdn.net/weixin_47872288/article/details/121466392