Day52 前端基础--Bootstrap框架

一，Bootstrap框架初识

　　https://v3.bootcss.com/css/

　　1.Bootstrap是什么？

　　　　1.就是一些HTML代码和css代码的组合

　　　　2.Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架，它是为实现快速开发web应用程序而设计的一套前端工具包。它支持响应式不布局，并且在V3版本之后坚持移动设备优先。

　　2.如何使用？

　　　　赋值粘贴一把梭

二，Bootstrap框架使用

　　1.基本模板：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!--IE浏览器高速渲染模式-->
    <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="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]如要兼容ie9则需要额外添加下面两行>
      <!--<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
      <!--<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <![endif]-->
  </head>
  <body>
　  <!--页面容器.container/.container-fluid-->
　　<div class="container" style="height:1000px;background-color:red">     
    <h1>你好，世界！</h1>
   </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
  </body>
</html>

　　2.栅格系统

简介：
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

<!--媒体查询-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 200px;
        }
        /*媒体查询*/
        @media screen and (max- 700px) {
            .c1 {
                background-color: green;
            }
        }
    </style>
</head>
<body>

<div class="c1">

</div>
</body>
</html>

　　　　1.row表示行，必放在container或container-fluid中

　　　　2.row被均分为12列，列的语法：col-xx-**

　　　　　　xx的取值范围：xs -> sm -> md -> lg

　　　　　　　　xs：超小屏幕(手机)

　　　　　　　　sm：小屏幕(平板)

　　　　　　　　md：中等屏幕(桌面显示器)

　　　　　　　　lg：大屏幕(大桌面显示器)

<!--实例：手机、平板、桌面-->

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

　　　　　　**的取值范围：1-12

　　　　3.只有列能作为行的子元素

　　　　4.列偏移

　　　　　　主要作用：使对应的列居中

　　　　　　col-xx-offset-**

<div class="row">
    <div class="col-md-4 col-md-offset-4" style="background-color:deepplink;height:100px"></div>
</div>

　　　　5.列嵌套

　　　　　　为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在.col-sm-*元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实，没有要求必须占满12列)，即：任意一列，都可以在内容再定义row，均分12份。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

　　　　6.列排序

　　　　　　通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列(column的顺序)。

　　　　　　　推：col-xx-push-**

　　　　　　　拉：col-xx-pull-**

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

三，常用样式

1.标题（小标题）:附加小标题

<h2>标题
    <small>小标题</small>
</h2>

　　2.中心内容：突出中心内容，字体变大，.lead

<p class="lead">被突出的内容</p>

3.高亮文本元素：..

<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地<mark>飞翔</mark>。</p>

　　4.被删除的文本：主要对于爬虫机器人来说意义不一样

<del>被删除的文本</del>

　　5.无用的文本：主要对于爬虫机器人来说意义不一样

<s>无用的文本</s>

　　6.插入文本

<ins>被插入的问题</ins>

　　7.文本强调：加粗

<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地<strong>飞翔</strong>。</p>

区别：在html5中，用于高亮单词或短语，不带有任何着重的意味。

　　8.文本强调：斜体

<em>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</em>

区别：在html5中，主要用于发言、技术词汇等，不带有任何强调的意味。

　　9.对齐：通过文本对齐类，可以简单方便的将文字重新对齐

<p class="text-left">Left aligned text.</p>   <!--左端对齐-->
<p class="text-center">Center aligned text.</p>    <!--中间对齐-->
<p class="text-right">Right aligned text.</p>   <!--右端对齐-->
<p class="text-justify">Justified text.</p>    <!--两端对齐-->
<p class="text-nowrap">No wrap text.</p>   <!--去掉空格-->

　　10.改变大小写

<p class="text-lowercase">Lowercased text.</p>  <!--统一转换为小写-->
<p class="text-uppercase">Uppercased text.</p>  <!--统一转换为大写-->
<p class="text-capitalize">Capitalized text.</p>  <!--单词首字母大写-->

　　11.缩略语：缩略语带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如果想看完整的内容，可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见)，但需要保护title属性。

<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

　　12.首字母缩略语：为缩略语添加.initialism类，可以让font-size变得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

13.地址：让联系信息以最接近日常使用的格式呈现。在每行结尾添加 可以保留需要的样式

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

　　14.引用

默认样式的引用：将任何HTML元素包裹在<blockquote>中即可表现为引用样式。对于直接引用，我们建议用标签。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

多种引用样式：对于标准样式的<blockquote>，可以通过几个简单的变体技能改变风格和内容。

命名来源：添加<footer>用于标明引用来源。来源的名称可以包裹进<cite>标签中。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<!--通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果-->
<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

　　15.列表：

　　　　1.无样式列表：移除了默认的list-style样式和左侧边距的一组元素(只针对直接子元素)，这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

<ul class="list-unstyled">
  <li>...</li>
</ul>

　　　　2.内联列表：通过设置display：inline-block;并添加小量的内填充，将所有元素放置与同一行。

<ul class="list-inline">
  <li>...</li>
</ul>

　　16.描述

　　　　默认描述：带有描述的短语列表

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述：.dl-horizontal可以让<dl>内的短语及其描述排在一行。开始是像<dl>的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行

补充：

　　自动截断：通过text-overflow属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内，列表将变为默认堆叠排列的布局方式。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

17.内联代码：通过<code>标签包裹内联样式的代码片段。

<code>&lt;div&gt;</code>

18.用户输入：通过<kbd>标签标记用户通过键盘输入的内容。

<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

19.代码块：多行代码可以使用<pre>标签。为了正确的展示代码，注意将尖括号做转义处理

补充：还可以使用.pre-scrollable类，其作用是设置max-height为350px，并在垂直方向展示滚动条。

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

20.变量：通过<var>标签标记变量

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

21.程序输出：通过<samp标签来标记程序输出的内容>

<samp>....</samp>