WEB学习——BootStrap

1.bootstrap概述
bootstrap中文文档网址：https://v3.bootcss.com/components/

2.响应式布局

3.目录结构

4.内容结构
　　文档下载地址：https://v3.bootcss.com/getting-started/#download ，将文档下载下来并解压出来，把目录中的内容导入项目中即可直接使用。

5.简洁模板

<!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="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

6.全局CSS样式
　　文档地址：https://v3.bootcss.com/css/ （以下内容基本都参考文档，可以直接查看文档学习）
　　
　　通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

　　1）布局容器
　　Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器
　　　<1> .container：类用于固定宽度并支持响应式布局的容器。
　　　<2> .container-fluid：类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container" 或者是 class="container-fluid">
  ...
</div>

　　2）栅格系统
　　3）排版
　　….
　　….

7.组件
8.JavaScript插件

WEB学习——BootStrap

猜你喜欢