bootstap初识之css

老师的博客：https://www.cnblogs.com/liwenzhou/p/8214637.html

bootstrap中文网：http://www.bootcss.com/

官网：https://getbootstrap.com

全局css：https://v3.bootcss.com/css/

bootCDN:https://www.bootcdn.cn/

首先在中文网下载社区的.解压，然后把常用的保留，不需要的删除。

解压后的文件目录

bootstrap-3.3.7-dist/

├── css  // CSS文件

│   ├── bootstrap-theme.css  // Bootstrap主题样式文件

│   ├── bootstrap-theme.css.map

│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件

│   ├── bootstrap-theme.min.css.map

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap.min.css  // 核心CSS样式压缩文件

│   └── bootstrap.min.css.map

├── fonts  // 字体文件

│   ├── glyphicons-halflings-regular.eot

│   ├── glyphicons-halflings-regular.svg

│   ├── glyphicons-halflings-regular.ttf

│   ├── glyphicons-halflings-regular.woff

│   └── glyphicons-halflings-regular.woff2

└── js  // JS文件

    ├── bootstrap.js

    ├── bootstrap.min.js  // 核心JS压缩文件

    └── npm.js

删除一些目录后：

bootstrap-3.3.7-dist/

├── css  // CSS文件

│   ├──

│   ├──

│   ├──

│   ├──

│   ├──

│   ├──

│   ├── bootstrap.min.css  // 核心CSS样式压缩文件

│   └──

├── fonts  // 字体文件

│   ├── glyphicons-halflings-regular.eot

│   ├── glyphicons-halflings-regular.svg

│   ├── glyphicons-halflings-regular.ttf

│   ├── glyphicons-halflings-regular.woff

│   └── glyphicons-halflings-regular.woff2

└── js  // JS文件

    ├──

    ├── bootstrap.min.js  // 核心JS压缩文件

    └──

然后倒入：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>测试</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link href="../db/normalize.css" rel="stylesheet">

    <link href="../db/bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<script src="../db/bootstrap/js/bootstrap.min.js"></script>

<script src="../db/jQuery.js"></script>

</body>

</html>

完成。

Bootstrap全局样式

地址：https://v3.bootcss.com/css/

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。

我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

标题相关：

<h1>一级标题36px</h1>

<h2>二级标题30px</h2>

<h3>三级标题24px</h3>

<h4>四级标题18px</h4>

<h5>五级标题14px</h5>

<h6>六级标题12px</h6>

<!--除了使用h标签，Bootstrap内置了相应的全局样式-->

<!--内联标签应用标题样式-->

<span class="h1">一级标题36px</span>

<span class="h2">二级标题30px</span>

<span class="h3">三级标题24px</span>

<span class="h4">四级标题18px</span>

<span class="h5">五级标题14px</span>

<span class="h6">六级标题12px</span>

副标题

<!--一级标题中嵌入小标题-->

<h1>一级标题<small>小标题</small></h1>

文本对齐

<!--文本对齐-->

<p class="text-left">文本左对齐</p>

<p class="text-center">文本居中</p>

<p class="text-right">文本右对齐</p>

文本大小写

<!--大小写-->

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

表格

Class	描述
.table-striped	条纹状表格
.table-bordered	带边框的表格
.table-hover	鼠标悬停变色的表格
.table-condensed	紧缩型表格
.table-responsive	响应式表格

状态类

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

表单

内联表单

表单状态

带图标的表单

按钮

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

按钮样式

<!-- Standard button -->

<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->

<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->

<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->

<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->

<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->

<button type="button" class="btn btn-link">（链接）Link</button>

按钮大小

<p>

  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>

  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>

</p>

<p>

  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>

  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>

</p>

<p>

  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>

  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>

</p>

<p>

  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>

  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>

</p>

图片

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

<img src="..." alt="..." class="img-rounded">

<img src="..." alt="..." class="img-circle">

<img src="..." alt="..." class="img-thumbnail">

辅助类

文本颜色

<p class="text-muted">...</p>

<p class="text-primary">...</p>

<p class="text-success">...</p>

<p class="text-info">...</p>

<p class="text-warning">...</p>

<p class="text-danger">...</p>

背景颜色

<p class="bg-primary">...</p>

<p class="bg-success">...</p>

<p class="bg-info">...</p>

<p class="bg-warning">...</p>

<p class="bg-danger">...</p>

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

下拉三角

<span class="caret"></span>

快速浮动

<div class="pull-left">...</div>

<div class="pull-right">...</div>

内容块居中

<div class="center-block">...</div>

清除浮动

<!-- Usage as a class -->

<div class="clearfix">...</div>

显示与隐藏

<div class="show">...</div>

<div class="hidden">...</div>

上面这些是摘自老师的。

下面是在css全局样式中自己看到的和老师上课总结的一些知识。

布局容器

<div class="container-fluid"> //全局的

<div class="container"> // 左右有空白的

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

<div class="container">
    <div class="row">
        <div class="col-md-1 col-xs-4">占1列</div><!--桌面级的设备占1列，小屏幕的占4列-->
        <div class="col-md-10 col-xs-4">占10列</div>
        <div class="col-md-1 col-xs-4">占1列</div>
    </div>
    <div class="row">
        <div class="col-md-5 col-md-offset-2">第二行 左边空两列</div><!--桌面级整体向右推动2格-->
    </div>
    <div class="row">
        <div class="col-md-3">占3列的div</div>
        <div class="col-md-6">占6列的div</div>
        <div class="col-md-6">占6列的div</div>
    </div>
       <div class="row">
        <div class="col-md-3 col-md-push-2">占3列的div</div><!--表示自己往左推进两行，可能会与右边的内容重合-->
        <div class="col-md-6">占6列的div</div>
    </div>
</div>

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

补充：

push推，及把div往右推动 pull是拔把div往左边推动

<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>

媒体查询

.c1 {

            background-color: red;

        }

/*当打开网页的设备是一个显示器设备，并且显示器的宽度小于600px时，使用下面的样式*/

        @media screen and (max-width: 400px) {

            .c1 {

                background-color: green;

            }

        }

/* 超小屏幕（手机，小于 768px） */

/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) { ... }

栅格参数

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

Less mixin 和变量

没搞懂这是干嘛的，下去自己好好看一下。gutter是指每个div的间距的两倍（因为有两个），默认为60px,及一row中两个div里面的内容的间隔差不多比两个汉字的距离稍微还大2个px

排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

中心内容

通过添加 .lead 类可以让段落突出显示。内容变大了。

使用less工具构建

没看懂

内联文本元素

下面都是标签：

</del>：删除线

</s>：无用文本，感觉和删除线一样。

<ins>：插入文本，下滑线

<u>：下划线

<small>：小写文本，父辈的0.85

<strong>：着重文本，加黑加粗

<em>：斜体

Alternate elements：

在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。

对齐

<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>

<!--text-justify:对齐文本，感觉没用啊-->
<!--text-nowrap：无包装的文本，感觉也没用-->

改变大小写

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

缩略语

<abbr title="attribute">attr</abbr>

首字母缩略语

<abbr title="attribute">attr</abbr>

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

地址

<address>

  <strong>alex</strong><br>

  北京老男孩教育大楼<br>

  五栋三栋308<br>

  <abbr title="Phone">P:</abbr> (123) 456-7890

</address>

<address>

  <strong>jin boss</strong><br>

  <a href="mailto:#">654123151@example.com</a>

</address>

效果图

alex
北京老男孩教育大楼
五栋三栋308
P: (123) 456-7890

jin boss
654123151@example.com

不知道字体为什么变为了斜体，真实的效果图不是斜体的

引用

默认样式的引用建议直接用p标签

<blockquote>

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

</blockquote>

多种引用样式

<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>

  <p>年轻人你怎么睡得着觉，你怎么睡得着，有点。。。</p>

  <footer>汤家凤 <cite title="Source Title">汤家凤的起床闹铃</cite></footer>

</blockquote>

效果图

年轻人你怎么睡得着觉，你怎么睡得着，有点。。。

汤家凤汤家凤的起床闹铃

额，效果图有点不一样。

另外一种展示风格：

<blockquote class="blockquote-reverse"> ... </blockquote>

全部右对齐了而已

列表

无序列表

<ul class="list-unstyled">

  <li>...</li>

</ul

列联列表

以行的的形式排列

<ul class="list-inline">

  <li>...</li>

</ul>

描述

<dl>

  <dt>...</dt>

  <dd>...</dd>

</dl>

代码

<div >

    <dl>

      <dt>海燕1</dt>

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

一会儿翅膀碰着波浪，一会儿箭一般地直冲向乌云，它叫喊着，──就在这鸟儿勇敢的叫喊声里，乌云听出了欢乐。

在这叫喊声里──充满着对暴风雨的渴望！在这叫喊声里，乌云听出了愤怒的力量、热情的火焰和胜利的信心。

</dd>

      <dt>海燕2</dt>

      <dd>海鸥在暴风雨来临之前呻吟着，──呻吟着，它们在大海上飞窜，想把自己对暴风雨的恐惧，掩藏到大海深处。

海鸭也在呻吟着，──它们这些海鸭啊，享受不了生活的战斗的欢乐：轰隆隆的雷声就把它们吓坏了。

</dd>

      <dd>蠢笨的企鹅，胆怯地把肥胖的身体躲藏到悬崖底下……只有那高傲的海燕.</dd>

      <dt>海燕4</dt>

      <dd>只有那高傲的海燕，勇敢地，自由自在地，在泛起白沫的大海上飞翔！

乌云越来越暗，越来越低，向海面直压下来，而波浪一边歌唱，一边冲向高空，去迎接那雷声。</dd>

    </dl>

  </div>

效果图

海燕1: 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。一会儿翅膀碰着波浪，一会儿箭一般地直冲向乌云，它叫喊着，──就在这鸟儿勇敢的叫喊声里，乌云听出了欢乐。在这叫喊声里──充满着对暴风雨的渴望！在这叫喊声里，乌云听出了愤怒的力量、热情的火焰和胜利的信心。
海燕2: 海鸥在暴风雨来临之前呻吟着，──呻吟着，它们在大海上飞窜，想把自己对暴风雨的恐惧，掩藏到大海深处。海鸭也在呻吟着，──它们这些海鸭啊，享受不了生活的战斗的欢乐：轰隆隆的雷声就把它们吓坏了。; 蠢笨的企鹅，胆怯地把肥胖的身体躲藏到悬崖底下……只有那高傲的海燕.
海燕4: 只有那高傲的海燕，勇敢地，自由自在地，在泛起白沫的大海上飞翔！乌云越来越暗，越来越低，向海面直压下来，而波浪一边歌唱，一边冲向高空，去迎接那雷声。

水平排列描述：

<dl class="dl-horizontal">

  <dt>...</dt>

  <dd>...</dd>

</dl>

效果图：

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

自动截断

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

代码

内敛代码

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

效果图：

For example, <section> should be wrapped as inline.

用户输入：

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>

To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

效果图:

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

代码块：

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

效果图
<p>Sample text here...</p>
还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

变量

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

程序输出

<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

<table class="table">

  ...

</table>

条纹表格

每一行增加斑马条纹样式

<table class="table table-striped">

  ...

</table>

带边框的的表格

<table class="table table-bordered">

  ...

</table>

鼠标悬停

每一行对鼠标悬停状态作出响应

<table class="table table-hover">

  ...

</table>

状态类

通过这些状态类可以为行或单元格设置颜色。

<table class="table">

    <thead>

        <th></th>

    </thead>

    <tbody>

        <tr class="active">

            <td></td>

        </tr>

    </tbody>

</table>

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">

  <table class="table">

    ...

  </table>

</div>

表单

点我

<form class="form-horizontal"> <!--不然为竖排(默认100%） 屏幕过小也会竖排class="form-horizontal"全为竖排-->
    <!--在form级别，默认width是100%，所以下级可以调-->
    <div class="form-group "><!--每一组必须嵌套，不然会影响浮动的-->
        <label class="sr-only" for="exampleInputName2">Name</label><!--class="sr-only" 隐藏laobel文本，所以注意站位符代替-->
        <input class="form-control" id="exampleInputName2" placeholder="Jane Doe" type="text">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2"> Email</label>
        <input class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com" type="email">
    </div>
    <div class="checkbox"><!--<div class="checkbox"> 与浮动有关 应该所有类型（例如text）的都是加了浮动的-->
        <label>
            <input type="checkbox"> Remember me
        </label>
    </div>
    <div class="form-group">
        <label for="111">自我介绍</label>
        <textarea class="form-control" placeholder="afdaaafasf" rows="3" id="111"></textarea>
    </div>
    <div class="form-group">
        <label class="checkbox-inline"><!--class="checkbox-inline" 表示行内显示-->

            <input type="checkbox" id="inlineCheckbox1" value="option1"> 11111111
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox2" value="option2"> 222222222
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox3" value="option3"> 333333333
        </label>

        <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 111111
        </label>
        <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 222222
        </label>
        <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3333
        </label>
    </div>
    <select class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
    <select multiple class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
    <button class="btn btn-success" type="submit">Send invitation</button>
    </form>
    <form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 ">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

    <!--text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。支持组件-->
    class="form-control"是铺满整各row，所以在input在div中加入，而textarea中时直接加入到textarea标签。对于label标签，没有设置
    宽度，所以label如果把input标签给包住了时，input的标签就不能铺满row了。
    1.class="form-control" class="form-group"都有有铺满row的性质，但是from-group必需在支持控件的标签使用（text、password、
    datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。支持控件），但是label标签
    不能铺满（文本不够不会铺满，输入框有个小的限度，label中文字长度过长时，才会延长输入框），所以label不能把input标签包住，需要通过for来绑定id的形式来实现。
    2.textarea支持单独设置row表示占几列
    3.class="form-horizontal" 不能与container里面的内容对齐，会往右一点。
    4.p class="form-control-static">email@example.com/p  class="form-control-static 表示静态控制，就是存文字，但是问的
    整体样式与表格匹配 class="form-control 多个文本框，你不点上去都可以以假乱真；
    5.form自带row
    6.control-label 文字靠右
    7.disable不让输入,bootsrap让他变强了
    8fieldset 标签 加上disabled 让所有的input框都disabled
    9在所有input标签内加上readonly属性。就只能看了。不让点了，相当于以前的disabled
    10类.help-block 提示信息
    11.has-success类放在div框中，下面的label文字和输入框会变说设置颜色
    12 添加输入框图标 见官网

写不下去了，太多了，自己去官网看。

。