一、初始Bootstrap
- 1、简介
- 2、组成
- 3、浏览器
- 4、视口
- 5、分辨率
- 6、可缩放矢量图形（Scalable Vector Graphics,SVG)
二、boorstrap的环境配置
- 1、在页面中引入本地文件
- 2、使用CDN加速器
三、bootstrap全局的css样式
- 1、HTML5文档类型
- 2、移动设备优先
- 3、禁用移动设备上的缩放功能
- 4、布局容器
- 5、文本排版样式
- 6、设置字母的大小写
- 7、列表样式
- 8、表格样式
- 9、表单样式
- 10、按钮
- 11、图片
- 12、辅助类
四、bootstrap的栅格系统
- 1、栅格系统
- 2、栅格参数
- 3、栅格系统列偏移
- 4、字体图标
- 5、下拉菜单
- 6、按钮组：将按钮放在btn-group的容器中
- 7、输入框组

一、初始Bootstrap

1、简介

简介：是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，
拥有样式库、组件和插件。常用来开发响应式布局

2、组成

（1）基本结构：栅格系统
（2）丰富的css样式库：只需要改变标签的class属性值，就可以给标签应用不同的样式。
（3）布局组件：有丰富的组件库
（4）插件：基于jQuery的插件，功能强大。

3、浏览器

PC端
Chrome浏览器的优势:
①市场占有率高，兼容性好，界面简洁、简单易用。基于强大的JavaScript V8引擎,速度很快。
②可通过扩展插件增强功能，便于开发人员使用。内置防止网络钓鱼及恶意软件功能，更加安全。
③跨平台，支持PC端的Windows、Linux和Mac系统，以及移动端的Android和iOS系统。

（1）浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。
（2）浏览器内核主要包括Blink、WebKit和Trident等。
（3）PC端的浏览器主要包括Google (谷歌)公司的Chrome浏览器、Mozilla公司的Firefox浏览器、和Edge浏览器等。

移动端：
①移动端设备主要包括Android、iOS等手机设备。
②屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。

（1）移动端的浏览器主要包括Android Browser和Mobile Safari,以及国产浏览器。
（2）浏览器的内核主要是Webkit内核，对HTML5提供了很好的支持。
（3）国产浏览器主要包括UC浏览器、QQ浏览器和百度浏览器等。

4、视口

视口：能将大分辨率尺寸网页缩小显示在手机浏览器

（1）布局视口（layout viewport)：是指网页的宽度
（2）视觉视口（visual viewport)：是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。
（3）理想视口（ideal viewport)：是指对设备来讲最理想的窗口尺寸。
（4）视口的设置：在<mete>标签中，将name属性设置为viewport，即可设置视口。在终端中以理想视口打开网页。

5、分辨率

6、可缩放矢量图形（Scalable Vector Graphics,SVG)

可缩放矢量图形：是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）

（1)SVG使用标签的方式定义各种图形，外层标签是<svg>

（2)它的属性包括x、y、width、height用数字表示，每个数字之间用空格或逗号隔开，表示定义在一个左上角（x,y)坐标位置，宽度为width,高度为height的矩形。

二、boorstrap的环境配置

1、在页面中引入本地文件

<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/bootstrap.min.js"></script>

2、使用CDN加速器

（1）CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，是内容传输更快，更稳定。
（2）用法:(前提必须联网）

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

三、bootstrap全局的css样式

1、HTML5文档类型

bootstrap使用到的某些HtmL元素和css属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

2、移动设备优先

Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在之中添加viewport 元数据标签。

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

3、禁用移动设备上的缩放功能

在移动设备浏览器上，通过为视口(viewport) 设置meta属性为user-scalable=no ,可以禁用其缩放(zooming) 功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。

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

4、布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container 容器。我们提供了两个作此用处的类。注意，由于padding等属性的原因，这两种容器类不能互相嵌套。

（1）.container：用于固定宽度并支持响应式布局的容器。
（2）.container-fluid：类似于100%宽度，占据全部视口（viewport）的容器。

举例如下：

<style>div{width: 300px;height: 180px;background-color: rgb(231, 184, 221);}
</style>
<body><div class="container"> </div><br><br><div class="container-fluid text-center text-capitalize" >西安邮电大学 abcd</div>
</body>

效果如下图所示：

5、文本排版样式

class=‘text-left’ 文本左对齐
class=‘text-right’ 文本右对齐
class=‘text-center’ 文本居中
class=’ text-justify’ 文本两端对齐
class=‘text-nowrap’ 禁止文本换行

6、设置字母的大小写

class=‘text-lowercase’ 转成小写
class=‘text-uppercase’ 转成大写
class=‘text-capitalize’ 首字母大写

7、列表样式

（1）无样式列表

class=‘list-unstyled’

①无序列表-顺序无关紧要的一组元素。

<body><ul class="list-unstyled"><li>西安</li><li>上海</li><li>北京</li></ul>
</body>

修改样式之前：

修改样式之后：

②有序列表-顺序至关紧要的一组元素。

<body><ol  class="list-unstyled"><li>西安</li><li>上海</li><li>北京</li></ol>
</body>

修改样式之前：

修改样式之后：

（2）内联列表

通过设置display:inline-block;并添加少量的内补（padding），将所有元素放置于同一行。

class=‘list-inline’

<body><ul ><li>西安</li><li>上海</li><li>北京</li></ul>
</body>

<ul class="list-inline"><li>西安</li><li>上海</li><li>北京</li></ul>

8、表格样式

（1）表格的全局样式：简要描述它是为任意<table>标签添加.table类可以为其赋予基本的样式。

class=“table”

（2）带边框的表格：添加. table-bordered类为表格和其中的每个单元格增加边框。

class=“table table-bordered”

（3)表格隔行变色，斑马线效果：通过.table-striped类可以给<tbody> 之内的每一行增加斑马条纹样式。

class="table table-bordered table-striped "

（4）鼠标悬停:通过添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。

class=“table table-bordered table-striped table-hover”

（5）紧缩表格:通过添加. table-condensed类可以让表格更加紧凑，单元格中的内补(padding) 均会减半。

class="table table-bordered table-striped table-hover table-condensed”

（6）状态类：通过这些状态类可以为行或单元格设置颜色

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

举个例子：

 <table class="table table-bordered table-striped table-hover table-condensed "><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th>    </tr></thead><tbody><tr class="table-success"><td>1001</td><td>贾宝玉</td><td>男</td><td>18</td></tr><tr><td>1002</td><td>贾元春</td><td>男</td><td>28</td></tr><tr class="table-warning"><td >1003</td><td>林黛玉</td><td>女</td><td>18</td></tr><tr><td>1004</td><td>王熙凤</td><td>女</td><td>19</td></tr></tbody></table>

效果展示：

9、表单样式

（1）html中的表单：

<form action="远程服务器地址" method="请求方式"></form>

（2）bootstrap应用到form的样式属性：

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。将label 元素和前面提到的控件包裹在.form-group中可以获得最好的排列。

a、form-control:应用该样式，则表单控件<input>,<textarea>,<select>的宽度默认100%（即占浏览器窗口宽度的100%）

<input class="form-control"/>
<textarea class="form-control"></textarea>
<select class="form-control"></select>

b、内联表单:为元素添加. form-inline类可使其内容左对齐并且表现为inline-block 级别的控件。只适用于视口(viewport) 至少在768px 宽度时(视口宽度再小的话就会使表单折叠)。

<form class="form-inline"></form>

c、水平排列的表单:通过为表单添加.form-horizontal类，并联合使用Bootstap.预置的栅格类,可以将label标签和控件组水平并排布局。这样做将改变.form–group的行为，使其表现为栅格系统中的行(row) . 因此就无需再额外添加.row了。

<form class="form-horizontal"></form>

10、按钮

1、可作为按钮使用的标签或元素
●为<a>、<button> 或<input> 元素添加按钮类(button class) 即可使用Bootstrap .
提供的样式。
●虽然按钮类可以应用到<a>和<button>元素上，但是，导航和导航条组件只支持
<button>元素。
●如果<a>元素被作为按钮使用，那么，务必为其设置role= “button” 属性。
●兼容性:强烈建议尽可能使用<button>元素来获得在各个浏览器上获得相匹配的绘制效果。

<a>、<button>、<input type=“button”/>

 <a href="#" class="btn btn-default" role="button">公司首页</a><button class="btn btn-default">公司简介</button><input type="button" class="btn btn-default" value="新闻中心"> <!--普通按钮--><input type="submit" class="btn btn-default" value="在线留言"> <!--提交按钮，在form表单外没有意义，form表单里面提交给远程服务器-->

（1）样式

    <button class="btn btn-default">default</button>//默认样式<button class="btn btn-primary">primary</button>//首选项<button class="btn btn-success">success</button>//成功<button class="btn btn-info">info</button>//一般信息<button class="btn btn-warning">warning</button>//警告<button class="btn btn-danger">danger</button>//危险<button class="btn btn-link">link</button>//链接

<button type="button" class="btn btn-primary active">激活状态</button>
<button class="btn btn-default" disabled>禁用状态</button>

（2）尺寸

btn-lg:大按钮
btn-sm:小按钮
btn-xs:超小按钮

    <button class="btn btn-success btn-lg">success</button><button class="btn btn-info">info</button><button class="btn btn-warning btn-sm">warning</button><button class="btn btn-danger btn-xs">danger</button>

11、图片

(1)class=“img-rounded”：圆角图片

(2)class=“img-circle” ：圆形图片

(3)class=“img-thumbnail”：边框圆角

 <img src="../images/001.png" class="img-rounded" width="200px" height="200px"><img src="../images/002.png" class="img-circle" width="200px" height="200px"><img src="../images/003.png" class="img-thumbnail" width="200px" height="200px">

12、辅助类

(1)文本颜色

         柔和的：<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>

☀️举个例子

<body style="text-align: center;"><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></body>

（2）背景色

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

☀️举个例子

<body style="text-align: center;"><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>
</body>

(3)三角符号：通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。

class=“caret”

(4)快速浮动类

可以将任意元素向左(. pull-left)或向右浮动(. pull-right)。

注意:不能用在导航条组件中，导航条组件要使用.navbar-left或. navbar-right

(5)让内容块网页居中

为任意元素设置display: block属性并通过margin属性让其中的内容居中。

<div class=“center-block”> … </div>

注意:一定要指定width，否则看不到效果。

(6)清除浮动

通过为父元素添加.clearfix 类可以很容易地清除浮动(float) 。

<body><div class="clearfix"><div class="pull-left">左</div><div class="pull-right">右</div>
</div>
</body>

(4)显示和隐藏内容:.show类和.hidden类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。

class=“show”
class=“hide”

四、bootstrap的栅格系统

1、栅格系统

（1）将屏幕或视口（viewport)自动分为最多12列。
（2）通过一系列的行（row)和列（column)的组合来创建页面布局。
（3）行（row)必须包含在.container（固定宽度）和.container-fulid(100%宽度)中。
（4）通过行（row)在水平方向创建一组列，内容应当放置于列（column)中，并且，只有列可以作为行的子元素。
（5）如果一行（row)中包含了的列（column)大于12，多余的列（column)所在的元素将被作为一个整体另起一行排列。

2、栅格参数

栅格参数:'*'标识1到12之间的数字

样式名称	含义
col-xs-*	超小屏幕、手机
col-sm-*	小屏幕、平板
col-md-*	中等屏幕、桌面显示器
col-lg-*	大屏幕、大桌面显示器

☀️举例说明：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../css/bootstrap.min.css"><script src="../js/jquery-3.4.1.js"></script><script src="../js/bootstrap.min.js"></script>
</head>
<body><div class="container-fluid"><div class="col-md-1 bg-success">1</div><div class="col-md-1 bg-danger">1</div><div class="col-md-1 bg-success">1</div><div class="col-md-1  bg-danger">1</div><div class="col-md-1 bg-success">1</div><div class="col-md-1  bg-danger">1</div><div class="col-md-1 bg-success">1</div><div class="col-md-1  bg-danger">1</div><div class="col-md-1 bg-success">1</div><div class="col-md-1  bg-danger">1</div><div class="col-md-1 bg-success">1</div><div class="col-md-1  bg-danger">1</div></div><br><div class="container-fluid"><div class="col-md-8  bg-success">col-md-8</div><div class="col-md-4  bg-danger">col-md-4</div></div><br><div class="container-fluid"><div class="col-md-4  bg-success">col-md-4</div><div class="col-md-4  bg-danger">col-md-4</div><div class="col-md-4  bg-warning">col-md-4</div></div><br><div class="container-fluid"><div class="col-md-6  bg-success">col-md-6</div><div class="col-md-6  bg-danger">col-md-6</div></div>
</body>
</html>

效果如下：

3、栅格系统列偏移

(1)列偏移

使用. col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素,增加了左侧的边距(margin) 。例如，. col-md-offset-4类将. col-md-4元素向右侧偏移了4个列(column) 的宽度。

☀️举例如下：

 <div class="row"><div class="col-md-4  bg-success">col-md-4</div><div class="col-md-4  bg-danger col-md-offset-4">col-md-4</div></div>

效果如下：

(2)列嵌套

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

☀️举例如下：

    <div class="row"><div class="col-md-8  bg-success">A<div class="row"><div class="col-md-4 bg-danger">C<br>C</div><div class="col-md-8 bg-primary">D<br>D</div></div>A</div><div class="col-md-4 bg-danger">B<br>B<br>B<br>B</div></div>

效果如下：

4、字体图标

(1)如何使用字体图标
出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方
都可以正常使用。注意，为了设置正确的内补(padding) ，务必在图标和文本之间添加一个
空格。
(2)不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的标签，并将图标类应用到这个标签上。
(3)只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。

☀️举个例子：

 <button class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><button class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>

效果如下：

5、下拉菜单

（1）定义容器（容器的class为：dropdown)
（2）在容器中添加菜单触发器和菜单项

 <div class="dropdown"><button class="btn btn-default" data-toggle="dropdown">关于我们<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">公司简介</a></li><li><a href="#">公司声誉</a></li><li><a href="#">发展历程</a></li><li><a href="#">组织结构</a></li></ul></div>

（3）分割线

    <div class="dropdown"><button class="btn btn-default" data-toggle="dropdown">关于我们<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">公司简介</a></li><li><a href="#">公司声誉</a></li><li role="separator" class="divider"></li><li><a href="#">发展历程</a></li><li><a href="#">组织结构</a></li></ul></div>

（4）禁用的菜单项（下拉菜单项不可用）

<div class="dropdown"><button class="btn btn-default" data-toggle="dropdown">关于我们<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">公司简介</a></li><li><a href="#">公司声誉</a></li><li role="separator" class="divider"></li><li><a href="#">发展历程</a></li><li class="disabled"><a href="#">组织结构</a></li></ul></div>

6、按钮组：将按钮放在btn-group的容器中

●通过按钮组容器.btn-group把一组按钮放在同一行里。
●按钮组中，除第一个和最后一个按钮外，中间按钮没有圆角。

<div class="btn-group"><button class="btn btn-default">left</button><button class="btn btn-default">middle</button><button class="btn btn-default">right</button></div>

(1)按钮工具栏

按钮工具栏：<div class=“btn-toolbar”>按钮</div>,因此把一组<div class=“btn-group”> 组合进一个<div class=“btn-toolbar”> 中就可以做成更复杂的组件。

☀️举个例子：

<body><br><!-- 按钮工具栏 --><div class="btn-toolbar"><!-- 按钮组 --><div class="btn-group"><button class="btn btn-default">left</button><button class="btn btn-default">middle</button><button class="btn btn-default">right</button></div><!-- 按钮组 --><div class="btn-group"><button class="btn btn-default">1</button><button class="btn btn-default">2</button><button class="btn btn-default">3</button></div></div>
</body>

效果如下：

(2)按钮组的尺寸：

只要给.btn-group 加上.btn-group-*类，就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用。

类名	用途
.btn-group-lg	应用于大型按钮组
.btn-group-md	应用于中型按钮组
.btn-group-sm	应用于小型按钮组
.btn-group-xs	应用于超小型按钮组

☀️举例如下：

  <!-- 按钮组 --><div class="btn-group btn-group-lg"><button class="btn btn-default">left</button><button class="btn btn-default">middle</button><button class="btn btn-default">right</button></div><!-- 按钮组 --><div class="btn-group btn-group-md"><button class="btn btn-default">left</button><button class="btn btn-default">middle</button><button class="btn btn-default">right</button></div><!-- 按钮组 --><div class="btn-group btn-group-sm"><button class="btn btn-default">left</button><button class="btn btn-default">middle</button><button class="btn btn-default">right</button></div><!-- 按钮组 --><div class="btn-group btn-group-xs"><button class="btn btn-default">left</button><button class="btn btn-default">middle</button><button class="btn btn-default">right</button></div>

效果如下：
(3)嵌套

想要把下拉菜单混合到一系列按钮中，只须把.btn-group 放入另一个.btn-group 中。

☀️举例如下：

 <div class="btn-group"><button class="btn btn-default">left</button><button class="btn btn-default">middle</button><button class="btn btn-default">right</button><div class="btn-group"><button class="btn btn-default  dropdown-toggle" data-toggle="dropdown" >More<span class="caret"></span></button><ul class="dropdown-menu" ><li ><a href="#">top</a></li><li><a href="#">middle</a></li><li><a href="#">bottom</a></li></ul></div></div>

效果如下：

7、输入框组

(1)描述

通过在文本输入框<input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为.input-group 赋予.input-group-addon 类，可以给.form-control的前面或后面添加额外的元素。

只支持文本输入框<input>, 不能用于<select>和<textarea>元素。

(2)尺寸

为.input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。尺寸类包括: .input-group-lg和.input-group-sm。

☀️举个例子：

 <!-- 输入框组 --><div class="container"><div class="input-group col-md-2"><span class="input-group-addon">@</span><input type="text" class="form-control" placeholder="username"></div>

效果如下：

(3)作为额外元素的按钮

为输入框组添加按钮需要额外添加一层嵌套，不是.input-group-addon, 而是添加.input-group-btn来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。

☀️举个例子：

<!-- 输入框组 --><div class="container"><div class="input-group col-md-2"><input type="text" class="form-control" placeholder="username"><span class="input-group-btn"><button class="btn btn-danger" data-toggle="dropdown">开始搜索<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">AAAA</a></li><li><a href="#">AAAA</a></li><li><a href="#">AAAA</a></li><li><a href="#">AAAA</a></li><li class="divider"></li><li><a href="#">AAAA</a></li></ul>   </span></div>
</div>

效果如下：

【Bootstrap-学习小结】相关推荐

数据科学导论学习小结——其三
数据科学导论学习小结--其三这是笔者大学二年级必修科目<数据科学基础>个人向笔记整理的第三部分,包含第六.第七两个章节.本笔记内容基于清华大学出版社<数据科学导论-探索数据的奥秘& ...
Python - 输出格式 (学习小结)
Python - 输出格式 (学习小结) Bu.xing 利用现代手段,创建学习家园关注他 1 人赞同了该文章 Python 输出格式我们常说的输出格式分两种含义: # 一种是指数据在屏幕上的显 ...
Page 的生命周期学习小结
(以前我在 csdn 写的翻译文章,现在转到这里来.) Page 的生命周期学习小结原文链接:Page Events: Order and PostBack 作者:Paul Wilson 翻译:木野 ...
BootStrap学习（2）
使用Bootstrap添加代码框可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...
c语言基本类型学习小结
基本类型学习小结环境: Dev-C++ 4.9.6.0 (gcc/mingw32), 使用-Wall编译选项基本类型包括字节型(char).整型(int)和浮点型(float/double). 定 ...
python中字典和集合的区别_Python中字典和集合学习小结
映射类型: 表示一个任意对象的集合,且可以通过另一个几乎是任意键值的集合进行索引与序列不同,映射是无序的,通过键进行索引任何不可变对象都可用作字典的键,如字符串.数字.元组等包含可变对象的列表. ...
【转载】Hyperledger学习小结
Hyperledger学习小结自学Hyperledger Composer也有段时间了,是时候对所学的知识总结一下了.因为没有实际项目参与的话,差不多也就到此为止了.后续可能会去了解一下以太坊的技术 ...
图片裁剪功能学习小结
图片裁剪功能学习小结近期有需要使用图片裁剪的功能,在使用插件和自己写裁剪组件之间犹豫了很久,后来根据需求经过反复的考虑,还是自己封装吧,毕竟自己动手,丰衣足食,对吧?嗯,??????是的!最后生成裁 ...
pthread多线程编程的学习小结
pthread多线程编程的学习小结 pthread 同步3种方法: 1 mutex 2 条件变量 3 读写锁:支持多个线程同时读,或者一个线程写程序员必上的开发者服务平台 -- DevStore p ...
ShaderLab学习小结（十九）RenderToCubemap创建能反射周围环境的效果
继续用"ShaderLab学习小结(十八)cubemap"中所做的shader 想要让它能对周围的环境进行反射思路就是要让它的cubemap里的内容是周围环境的映射 shader ...

【Bootstrap-学习小结】

目录

一、初始Bootstrap

1、简介

2、组成

3、浏览器

4、视口

5、分辨率

6、可缩放矢量图形（Scalable Vector Graphics,SVG)

二、boorstrap的环境配置

1、在页面中引入本地文件

2、使用CDN加速器

三、bootstrap全局的css样式

1、HTML5文档类型

2、移动设备优先

3、禁用移动设备上的缩放功能

4、布局容器

5、文本排版样式

6、设置字母的大小写

7、列表样式

8、表格样式

9、表单样式

10、按钮

11、图片

12、辅助类

四、bootstrap的栅格系统

1、栅格系统

2、栅格参数

3、栅格系统列偏移

4、字体图标

5、下拉菜单

6、按钮组：将按钮放在btn-group的容器中

7、输入框组

【Bootstrap-学习小结】相关推荐

最新文章

热门文章