Bootstrap笔记--快速入门1

首先是Bootstrap的简介：

业余了解：下面这个网址可以查询IP地址的地理位置

下面学习：（具体可以参考Bootstrap中文网）

栅格系统

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

----------------------------------------------------------------------------------------------------------------

创建文档一开始需要引入这几样：

<!DOCTYPE html>

<html>

<head>

<title>demo02</title>//加入title

</head>

<body>

</body>

</html>

Container和container-fluid的区别：

container是两边有空格，

container-fluid是不管在哪种分辨率下，它都是占满全屏的

列偏移：

col-md-offset-3，在12等份的基础上，向左偏移了三格

push是推，向右推几格

Pull是拉，向左拉几格

跨设备组合：

在不同的分辨率下不同的组合

-------------------------------------------------------------------------------------------------------------------------------

用栅格系统就要在container下使用行，行下有列

由上面一个代码片段可知：在xs分辨率下排两行，在sm分辨率下排一行

原因：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

清除浮动的操作：

clearfix 就是清除浮动的意思

visible-xs 就是在超小分辨率下显示这个div,在其他分辨率下不清除（这里的xs就是指超小屏幕，栅格参数中有其它屏幕的表示方法）

如何禁止响应布局？

第一：不要带有移动设备的这个，把这个删掉

第二：不要用bootstrap定义的这个container的样式，自己定义一个container的样式，就是传统的web模式

排版前的基础：

HTML5文档类型

判断是不是HTML5类型，看两点就行，

1. <!DOCTYPE html>

2. <meta charset=”utf-8”>

有这两点就是，下面是一个简单的HTML5文档类型

在head标签里面增加一个meta

viewport就是说可以指定内容的宽度，也可以指定高度，指定缩放，

Initial-scale=1是说初始的缩放比例是多少，它的值是0.01到10之间

Minimum-scale=float_value 最小缩放比例是多少

Maximum-scale=float_value 最大缩放比例是多少

User-scalable=no 是说使不使用缩放

如果说使用了Initial-scale=1，没使用User-scalable=no，这个内容会保持高分配里的1:1的比例，而且不进行缩放

高度一般不设置

一般来说：记住这几行就行了，前面具体的解释是作一个了解，记住是写在head中。

<head>

</head>

---------------------------------------------------------------------------------------------------------------------------------

响应式图片（图片可以随着网页的放大缩小而变化）-----class=”img-responsive”

它设置的100%不会大于图片所在容器的大小

响应式图片实例：

排版和链接：

下面是实例：

abbr的用法：

就是你在里面写东西，点击里面的会显示title的

两者区别：

显示的

不加class显示的是小写的单词，加上之后单词会变成大写

地址元素address的用法：

显示效果：

引用：

显示效果：

右对齐的方式：

如果下面的来自……想变小一点：

将cite标签改为small标签

实例：

无序列表：

想要是水平的显示，需要加li-inline

显示效果：

有序列表：

下面是<code></code>和<kbd></kbd>的代码和显示效果：

<pre></pre>的代码和显示效果：

<var><var>和<smap></smap>的代码和显示效果：

这是用class=table那个做的基础的样式，直接使用就行了

这个表格占满了

带条纹表格.table-striped 记得要在table的基础上写

带边框的，还可以与条纹的一起使用

鼠标悬停效果：就是鼠标移到哪行上，哪行就会有一个灰色效果，类似于高亮显示

紧凑：只是边距有些不同而已，不太明显

行内样式：会有不同的颜色设置的class

响应式表格：其实效果和前面一样

需要加个div

这个class=”form-inline” 是将表单弄成水平的

这个”sr-only”是将用户名隐藏掉

内联表单：

Form-group 设置了这个边框与下一个边框的距离是15px

单选框要这样写，要不然排版会有问题

From-inline是水平排列

Control-label是让用户名和边框那边没有大的间距

在文本域中：

From-control是把文本框直接占满容器的100% 就不用设置cols，不管用的,可以设置行rows

代码如下：

多选框用法以及实例：

单选框用法以及实例：

在使用checkbox和radio的时候大家一定要注意写法：

这样有利于控制

的间距，这样写是bootstrap定义好的，放大缩小都不会乱

checkBox:

默认纵向排列：

想要默认选中谁，就写个checked就行了，在HTML5中，不需要再给它值

这些都是bootstrap给我们定义的标准，所以以后要写单选框还是多选框的时候都按这个标准来写。

步骤：首先在div里面给类选择器，checkBox或者radio.然后在lable把文字，单选或者多选的按钮给括起来。

接下来学习水平排列的checkBox和radio。

在lable标签中指定”checkbox-inline” 也可以用radio-inline

静态控件：

如果需要在表单中将一行纯文本和lable元素放置于同一行，为<p>元素添加.from-control-static类即可。

控件的状态：

焦点状态

禁用状态

被禁用的fieldset

只读状态

校验状态

接下来一一示范：

这个autofocus的作用就是页面一加载完毕就焦点集中在这个框框上。获取焦点的状态。

placeholder=”输入电话号”就是在文本框里会出现

加一个disable属性,就是这个属性被禁掉的意思，点击这个输入电话号没反应

如果在表单里面加fileset disable属性的话，那么整个表单都没有作用

</div>

</div>

</div>

</div>

</div>

<div>

</div>

<div>

</div>

</fieldset>

</form>

</div>

readonly只读状态

和disable作用差不多，disable是禁用状态

--------------------------------------------------------------

has-success（绿色）校验状态 has-warning警告色 has-error

这个框框变成了绿色边框，还有其他几个样式

为表单控件增加额外的小图标：

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。

现在我们自己做一个小例子：

先设置在表单里写一个文本框：

然后需要在外层的div上加一个 has-feedback 对小图标进行定位

然后在input后面增加一个span标签

想用其他图标的话可以上去Bootstrap中文网，然后点击组件这一栏下面有可用的图标，

使用方法：

想用哪一个，就把下面的英文单词复制下来，粘贴到span标签中

总结一下：

记住两步

第一步：在大的div中，from-group后面加一个has-feedback

第二步：在表单控件标签后面加一个span标签，span标签中加图标样式，别忘了还要加from-control-feedback

记不住的时候多看看bootstrap中文网，看看文档。

---------------------------------------------------------------------

如何控制控件的大小？

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

这些标签不仅可以用在select标签中，还可以用在select和textarea标签中

这个是有效果的

它一共有七种样式，可以慢慢去学习

Btn的写法：我们写的时候就是先写btn 再写btn的样式

注意：按钮的大小取决于里面文字的大小加上它的padding

按钮的大小：

也就是在原有的基础上，根据自己的需要再加上这些属性。

多标签对按钮的支持：

显示的结果都是一个按钮。

活动状态：active 按钮就像是一个按下去的状态，颜色深一点

效果：后面那个是加上active的

禁用状态：就是把active改成disabled，禁用状态就是按着按钮之后没有作用

注意:IE9以下的版本这个a标签的禁用状态，超链接依然能用，这是存在的一个问题，需要注意一下。

加上一个class=”img-responsive”后，这个图片就可以随着屏幕来进行变化了。

响应式图片：这个设置的样式就是宽度100%，高度自动。

下面图片的三种形状：

第一个是设置圆角的

第二个是设置成圆形

第三个是加上一个空白的框框

下面学习文本样式：

下面这几个是文本颜色的几种样式：

下面给文字加上背景颜色：

下面学习：辅助图标

定义叉号的按钮，并且有效果这需要两步，一是加上close,二是加×

下面这个也可以实现效果：

还有一个向下的箭头：caret

接下来学习内容的浮动：

左浮右浮居中的一些样式

visible-sm是在小屏幕下面显示这个信息

hidden是隐藏的意思，hidden-md是在中等屏幕下隐藏

下面说bootstrap的组件：

使用发小图标很简单，上去bootstrap中文网

找组件下面就有图标

一般图标应用在ul,li,span标签中，你想使用哪个标签，就把他下面的单词复制下来，写到class中

例如：

应用场景：可以在各种元素中使用，比如说，按钮中

在工具栏中也可以使用：注意是两个div

设置图标大小：

想要变小一点，就把btn-lg改为btn-sx

图标放到按钮中，大小是自动的。

输入框样式：

最开始的一个div占了我们小屏幕的3格，左边空了两格------------<div class=”col-sm-3 col-sm-offset-2”>

Input-group表示是一组输入框

-----------------------------------------------

</span>

</div>

现在学习下拉菜单的用法：

在Bootstrap笔记--快速入门2中将继续……

---恢复内容结束---

首先是Bootstrap的简介：

业余了解：下面这个网址可以查询IP地址的地理位置

下面学习：（具体可以参考Bootstrap中文网）

栅格系统

----------------------------------------------------------------------------------------------------------------

创建文档一开始需要引入这几样：

<!DOCTYPE html>

<html>

<head>

<title>demo02</title>//加入title

</head>

<body>

</body>

</html>

Container和container-fluid的区别：

container是两边有空格，

container-fluid是不管在哪种分辨率下，它都是占满全屏的

列偏移：

col-md-offset-3，在12等份的基础上，向左偏移了三格

push是推，向右推几格

Pull是拉，向左拉几格

跨设备组合：

在不同的分辨率下不同的组合

-------------------------------------------------------------------------------------------------------------------------------

用栅格系统就要在container下使用行，行下有列

由上面一个代码片段可知：在xs分辨率下排两行，在sm分辨率下排一行

原因：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

清除浮动的操作：

clearfix 就是清除浮动的意思

visible-xs 就是在超小分辨率下显示这个div,在其他分辨率下不清除（这里的xs就是指超小屏幕，栅格参数中有其它屏幕的表示方法）

如何禁止响应布局？

第一：不要带有移动设备的这个，把这个删掉

第二：不要用bootstrap定义的这个container的样式，自己定义一个container的样式，就是传统的web模式

排版前的基础：

HTML5文档类型

判断是不是HTML5类型，看两点就行，

1. <!DOCTYPE html>

2. <meta charset=”utf-8”>

有这两点就是，下面是一个简单的HTML5文档类型

在head标签里面增加一个meta

viewport就是说可以指定内容的宽度，也可以指定高度，指定缩放，

Initial-scale=1是说初始的缩放比例是多少，它的值是0.01到10之间

Minimum-scale=float_value 最小缩放比例是多少

Maximum-scale=float_value 最大缩放比例是多少

User-scalable=no 是说使不使用缩放

如果说使用了Initial-scale=1，没使用User-scalable=no，这个内容会保持高分配里的1:1的比例，而且不进行缩放

高度一般不设置

一般来说：记住这几行就行了，前面具体的解释是作一个了解，记住是写在head中。

<head>

</head>

---------------------------------------------------------------------------------------------------------------------------------

响应式图片（图片可以随着网页的放大缩小而变化）-----class=”img-responsive”

它设置的100%不会大于图片所在容器的大小

响应式图片实例：

排版和链接：

下面是实例：

abbr的用法：

就是你在里面写东西，点击里面的会显示title的

两者区别：

显示的

不加class显示的是小写的单词，加上之后单词会变成大写

地址元素address的用法：

显示效果：

引用：

显示效果：

右对齐的方式：

如果下面的来自……想变小一点：

将cite标签改为small标签

实例：

无序列表：

想要是水平的显示，需要加li-inline

显示效果：

有序列表：

下面是<code></code>和<kbd></kbd>的代码和显示效果：

<pre></pre>的代码和显示效果：

<var><var>和<smap></smap>的代码和显示效果：

这是用class=table那个做的基础的样式，直接使用就行了

这个表格占满了

带条纹表格.table-striped 记得要在table的基础上写

带边框的，还可以与条纹的一起使用

鼠标悬停效果：就是鼠标移到哪行上，哪行就会有一个灰色效果，类似于高亮显示

紧凑：只是边距有些不同而已，不太明显

行内样式：会有不同的颜色设置的class

响应式表格：其实效果和前面一样

需要加个div

这个class=”form-inline” 是将表单弄成水平的

这个”sr-only”是将用户名隐藏掉

内联表单：

Form-group 设置了这个边框与下一个边框的距离是15px

单选框要这样写，要不然排版会有问题

From-inline是水平排列

Control-label是让用户名和边框那边没有大的间距

在文本域中：

From-control是把文本框直接占满容器的100% 就不用设置cols，不管用的,可以设置行rows

代码如下：

多选框用法以及实例：

单选框用法以及实例：

在使用checkbox和radio的时候大家一定要注意写法：

这样有利于控制

的间距，这样写是bootstrap定义好的，放大缩小都不会乱

checkBox:

默认纵向排列：

想要默认选中谁，就写个checked就行了，在HTML5中，不需要再给它值

这些都是bootstrap给我们定义的标准，所以以后要写单选框还是多选框的时候都按这个标准来写。

步骤：首先在div里面给类选择器，checkBox或者radio.然后在lable把文字，单选或者多选的按钮给括起来。

接下来学习水平排列的checkBox和radio。

在lable标签中指定”checkbox-inline” 也可以用radio-inline

静态控件：

如果需要在表单中将一行纯文本和lable元素放置于同一行，为<p>元素添加.from-control-static类即可。

控件的状态：

焦点状态

禁用状态

被禁用的fieldset

只读状态

校验状态

接下来一一示范：

这个autofocus的作用就是页面一加载完毕就焦点集中在这个框框上。获取焦点的状态。

placeholder=”输入电话号”就是在文本框里会出现

加一个disable属性,就是这个属性被禁掉的意思，点击这个输入电话号没反应

如果在表单里面加fileset disable属性的话，那么整个表单都没有作用

</div>

</div>

</div>

</div>

</div>

<div>

</div>

<div>

</div>

</fieldset>

</form>

</div>

readonly只读状态

和disable作用差不多，disable是禁用状态

--------------------------------------------------------------

has-success（绿色）校验状态 has-warning警告色 has-error

这个框框变成了绿色边框，还有其他几个样式

为表单控件增加额外的小图标：

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。

现在我们自己做一个小例子：

先设置在表单里写一个文本框：

然后需要在外层的div上加一个 has-feedback 对小图标进行定位

然后在input后面增加一个span标签

想用其他图标的话可以上去Bootstrap中文网，然后点击组件这一栏下面有可用的图标，

使用方法：

想用哪一个，就把下面的英文单词复制下来，粘贴到span标签中

总结一下：

记住两步

第一步：在大的div中，from-group后面加一个has-feedback

第二步：在表单控件标签后面加一个span标签，span标签中加图标样式，别忘了还要加from-control-feedback

记不住的时候多看看bootstrap中文网，看看文档。

---------------------------------------------------------------------

如何控制控件的大小？

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

这些标签不仅可以用在select标签中，还可以用在select和textarea标签中

这个是有效果的

它一共有七种样式，可以慢慢去学习

Btn的写法：我们写的时候就是先写btn 再写btn的样式

注意：按钮的大小取决于里面文字的大小加上它的padding

按钮的大小：

也就是在原有的基础上，根据自己的需要再加上这些属性。

多标签对按钮的支持：

显示的结果都是一个按钮。

活动状态：active 按钮就像是一个按下去的状态，颜色深一点

效果：后面那个是加上active的

禁用状态：就是把active改成disabled，禁用状态就是按着按钮之后没有作用

注意:IE9以下的版本这个a标签的禁用状态，超链接依然能用，这是存在的一个问题，需要注意一下。

加上一个class=”img-responsive”后，这个图片就可以随着屏幕来进行变化了。

响应式图片：这个设置的样式就是宽度100%，高度自动。

下面图片的三种形状：

第一个是设置圆角的

第二个是设置成圆形

第三个是加上一个空白的框框

下面学习文本样式：

下面这几个是文本颜色的几种样式：

下面给文字加上背景颜色：

下面学习：辅助图标

定义叉号的按钮，并且有效果这需要两步，一是加上close,二是加×

下面这个也可以实现效果：

还有一个向下的箭头：caret

接下来学习内容的浮动：

左浮右浮居中的一些样式

visible-sm是在小屏幕下面显示这个信息

hidden是隐藏的意思，hidden-md是在中等屏幕下隐藏

下面说bootstrap的组件：

使用发小图标很简单，上去bootstrap中文网

找组件下面就有图标

一般图标应用在ul,li,span标签中，你想使用哪个标签，就把他下面的单词复制下来，写到class中

例如：

应用场景：可以在各种元素中使用，比如说，按钮中

在工具栏中也可以使用：注意是两个div

设置图标大小：

想要变小一点，就把btn-lg改为btn-sx

图标放到按钮中，大小是自动的。

输入框样式：

最开始的一个div占了我们小屏幕的3格，左边空了两格------------<div class=”col-sm-3 col-sm-offset-2”>

Input-group表示是一组输入框

-----------------------------------------------

</span>

</div>

现在学习下拉菜单的用法：

在Bootstrap笔记--快速入门2中将继续……

---恢复内容开始---

首先是Bootstrap的简介：

业余了解：下面这个网址可以查询IP地址的地理位置

下面学习：（具体可以参考Bootstrap中文网）

栅格系统

----------------------------------------------------------------------------------------------------------------

创建文档一开始需要引入这几样：

<!DOCTYPE html>

<html>

<head>

<title>demo02</title>//加入title

</head>

<body>

</body>

</html>

Container和container-fluid的区别：

container是两边有空格，

container-fluid是不管在哪种分辨率下，它都是占满全屏的

列偏移：

col-md-offset-3，在12等份的基础上，向左偏移了三格

push是推，向右推几格

Pull是拉，向左拉几格

跨设备组合：

在不同的分辨率下不同的组合

-------------------------------------------------------------------------------------------------------------------------------

用栅格系统就要在container下使用行，行下有列

由上面一个代码片段可知：在xs分辨率下排两行，在sm分辨率下排一行

原因：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

清除浮动的操作：

clearfix 就是清除浮动的意思

visible-xs 就是在超小分辨率下显示这个div,在其他分辨率下不清除（这里的xs就是指超小屏幕，栅格参数中有其它屏幕的表示方法）

如何禁止响应布局？

第一：不要带有移动设备的这个，把这个删掉

第二：不要用bootstrap定义的这个container的样式，自己定义一个container的样式，就是传统的web模式

排版前的基础：

HTML5文档类型

判断是不是HTML5类型，看两点就行，

1. <!DOCTYPE html>

2. <meta charset=”utf-8”>

有这两点就是，下面是一个简单的HTML5文档类型

在head标签里面增加一个meta

viewport就是说可以指定内容的宽度，也可以指定高度，指定缩放，

Initial-scale=1是说初始的缩放比例是多少，它的值是0.01到10之间

Minimum-scale=float_value 最小缩放比例是多少

Maximum-scale=float_value 最大缩放比例是多少

User-scalable=no 是说使不使用缩放

如果说使用了Initial-scale=1，没使用User-scalable=no，这个内容会保持高分配里的1:1的比例，而且不进行缩放

高度一般不设置

一般来说：记住这几行就行了，前面具体的解释是作一个了解，记住是写在head中。

<head>

</head>

---------------------------------------------------------------------------------------------------------------------------------

响应式图片（图片可以随着网页的放大缩小而变化）-----class=”img-responsive”

它设置的100%不会大于图片所在容器的大小

响应式图片实例：

排版和链接：

下面是实例：

abbr的用法：

就是你在里面写东西，点击里面的会显示title的

两者区别：

显示的

不加class显示的是小写的单词，加上之后单词会变成大写

地址元素address的用法：

显示效果：

引用：

显示效果：

右对齐的方式：

如果下面的来自……想变小一点：

将cite标签改为small标签

实例：

无序列表：

想要是水平的显示，需要加li-inline

显示效果：

有序列表：

下面是<code></code>和<kbd></kbd>的代码和显示效果：

<pre></pre>的代码和显示效果：

<var><var>和<smap></smap>的代码和显示效果：

这是用class=table那个做的基础的样式，直接使用就行了

这个表格占满了

带条纹表格.table-striped 记得要在table的基础上写

带边框的，还可以与条纹的一起使用

鼠标悬停效果：就是鼠标移到哪行上，哪行就会有一个灰色效果，类似于高亮显示

紧凑：只是边距有些不同而已，不太明显

行内样式：会有不同的颜色设置的class

响应式表格：其实效果和前面一样

需要加个div

这个class=”form-inline” 是将表单弄成水平的

这个”sr-only”是将用户名隐藏掉

内联表单：

Form-group 设置了这个边框与下一个边框的距离是15px

单选框要这样写，要不然排版会有问题

From-inline是水平排列

Control-label是让用户名和边框那边没有大的间距

在文本域中：

From-control是把文本框直接占满容器的100% 就不用设置cols，不管用的,可以设置行rows

代码如下：

多选框用法以及实例：

单选框用法以及实例：

在使用checkbox和radio的时候大家一定要注意写法：

这样有利于控制

的间距，这样写是bootstrap定义好的，放大缩小都不会乱

checkBox:

默认纵向排列：

想要默认选中谁，就写个checked就行了，在HTML5中，不需要再给它值

这些都是bootstrap给我们定义的标准，所以以后要写单选框还是多选框的时候都按这个标准来写。

步骤：首先在div里面给类选择器，checkBox或者radio.然后在lable把文字，单选或者多选的按钮给括起来。

接下来学习水平排列的checkBox和radio。

在lable标签中指定”checkbox-inline” 也可以用radio-inline

静态控件：

如果需要在表单中将一行纯文本和lable元素放置于同一行，为<p>元素添加.from-control-static类即可。

控件的状态：

焦点状态

禁用状态

被禁用的fieldset

只读状态

校验状态

接下来一一示范：

这个autofocus的作用就是页面一加载完毕就焦点集中在这个框框上。获取焦点的状态。

placeholder=”输入电话号”就是在文本框里会出现

加一个disable属性,就是这个属性被禁掉的意思，点击这个输入电话号没反应

如果在表单里面加fileset disable属性的话，那么整个表单都没有作用

</div>

</div>

</div>

</div>

</div>

<div>

</div>

<div>

</div>

</fieldset>

</form>

</div>

readonly只读状态

和disable作用差不多，disable是禁用状态

--------------------------------------------------------------

has-success（绿色）校验状态 has-warning警告色 has-error

这个框框变成了绿色边框，还有其他几个样式

为表单控件增加额外的小图标：

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。

现在我们自己做一个小例子：

先设置在表单里写一个文本框：

然后需要在外层的div上加一个 has-feedback 对小图标进行定位

然后在input后面增加一个span标签

想用其他图标的话可以上去Bootstrap中文网，然后点击组件这一栏下面有可用的图标，

使用方法：

想用哪一个，就把下面的英文单词复制下来，粘贴到span标签中

总结一下：

记住两步

第一步：在大的div中，from-group后面加一个has-feedback

第二步：在表单控件标签后面加一个span标签，span标签中加图标样式，别忘了还要加from-control-feedback

记不住的时候多看看bootstrap中文网，看看文档。

---------------------------------------------------------------------

如何控制控件的大小？

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

这些标签不仅可以用在select标签中，还可以用在select和textarea标签中

这个是有效果的

它一共有七种样式，可以慢慢去学习

Btn的写法：我们写的时候就是先写btn 再写btn的样式

注意：按钮的大小取决于里面文字的大小加上它的padding

按钮的大小：

也就是在原有的基础上，根据自己的需要再加上这些属性。

多标签对按钮的支持：

显示的结果都是一个按钮。

活动状态：active 按钮就像是一个按下去的状态，颜色深一点

效果：后面那个是加上active的

禁用状态：就是把active改成disabled，禁用状态就是按着按钮之后没有作用

注意:IE9以下的版本这个a标签的禁用状态，超链接依然能用，这是存在的一个问题，需要注意一下。

加上一个class=”img-responsive”后，这个图片就可以随着屏幕来进行变化了。

响应式图片：这个设置的样式就是宽度100%，高度自动。

下面图片的三种形状：

第一个是设置圆角的

第二个是设置成圆形

第三个是加上一个空白的框框

下面学习文本样式：

下面这几个是文本颜色的几种样式：

下面给文字加上背景颜色：

下面学习：辅助图标

定义叉号的按钮，并且有效果这需要两步，一是加上close,二是加×

下面这个也可以实现效果：

还有一个向下的箭头：caret

接下来学习内容的浮动：

左浮右浮居中的一些样式

visible-sm是在小屏幕下面显示这个信息

hidden是隐藏的意思，hidden-md是在中等屏幕下隐藏

下面说bootstrap的组件：

使用发小图标很简单，上去bootstrap中文网

找组件下面就有图标

一般图标应用在ul,li,span标签中，你想使用哪个标签，就把他下面的单词复制下来，写到class中

例如：

应用场景：可以在各种元素中使用，比如说，按钮中

在工具栏中也可以使用：注意是两个div

设置图标大小：

想要变小一点，就把btn-lg改为btn-sx

图标放到按钮中，大小是自动的。

输入框样式：

最开始的一个div占了我们小屏幕的3格，左边空了两格------------<div class=”col-sm-3 col-sm-offset-2”>

Input-group表示是一组输入框

-----------------------------------------------

</span>

</div>

现在学习下拉菜单的用法：

在Bootstrap笔记--快速入门2中将继续……

---恢复内容结束---

首先是Bootstrap的简介：

业余了解：下面这个网址可以查询IP地址的地理位置

下面学习：（具体可以参考Bootstrap中文网）

栅格系统

----------------------------------------------------------------------------------------------------------------

创建文档一开始需要引入这几样：

<!DOCTYPE html>

<html>

<head>

<title>demo02</title>//加入title

</head>

<body>

</body>

</html>

Container和container-fluid的区别：

container是两边有空格，

container-fluid是不管在哪种分辨率下，它都是占满全屏的

列偏移：

col-md-offset-3，在12等份的基础上，向左偏移了三格

push是推，向右推几格

Pull是拉，向左拉几格

跨设备组合：

在不同的分辨率下不同的组合

-------------------------------------------------------------------------------------------------------------------------------

用栅格系统就要在container下使用行，行下有列

由上面一个代码片段可知：在xs分辨率下排两行，在sm分辨率下排一行

原因：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

清除浮动的操作：

clearfix 就是清除浮动的意思

visible-xs 就是在超小分辨率下显示这个div,在其他分辨率下不清除（这里的xs就是指超小屏幕，栅格参数中有其它屏幕的表示方法）

如何禁止响应布局？

第一：不要带有移动设备的这个，把这个删掉

第二：不要用bootstrap定义的这个container的样式，自己定义一个container的样式，就是传统的web模式

排版前的基础：

HTML5文档类型

判断是不是HTML5类型，看两点就行，

1. <!DOCTYPE html>

2. <meta charset=”utf-8”>

有这两点就是，下面是一个简单的HTML5文档类型

在head标签里面增加一个meta

viewport就是说可以指定内容的宽度，也可以指定高度，指定缩放，

Initial-scale=1是说初始的缩放比例是多少，它的值是0.01到10之间

Minimum-scale=float_value 最小缩放比例是多少

Maximum-scale=float_value 最大缩放比例是多少

User-scalable=no 是说使不使用缩放

如果说使用了Initial-scale=1，没使用User-scalable=no，这个内容会保持高分配里的1:1的比例，而且不进行缩放

高度一般不设置

一般来说：记住这几行就行了，前面具体的解释是作一个了解，记住是写在head中。

<head>

</head>

---------------------------------------------------------------------------------------------------------------------------------

响应式图片（图片可以随着网页的放大缩小而变化）-----class=”img-responsive”

它设置的100%不会大于图片所在容器的大小

响应式图片实例：

排版和链接：

下面是实例：

abbr的用法：

就是你在里面写东西，点击里面的会显示title的

两者区别：

显示的

不加class显示的是小写的单词，加上之后单词会变成大写

地址元素address的用法：

显示效果：

引用：

显示效果：

右对齐的方式：

如果下面的来自……想变小一点：

将cite标签改为small标签

实例：

无序列表：

想要是水平的显示，需要加li-inline

显示效果：

有序列表：

下面是<code></code>和<kbd></kbd>的代码和显示效果：

<pre></pre>的代码和显示效果：

<var><var>和<smap></smap>的代码和显示效果：

这是用class=table那个做的基础的样式，直接使用就行了

这个表格占满了

带条纹表格.table-striped 记得要在table的基础上写

带边框的，还可以与条纹的一起使用

鼠标悬停效果：就是鼠标移到哪行上，哪行就会有一个灰色效果，类似于高亮显示

紧凑：只是边距有些不同而已，不太明显

行内样式：会有不同的颜色设置的class

响应式表格：其实效果和前面一样

需要加个div

这个class=”form-inline” 是将表单弄成水平的

这个”sr-only”是将用户名隐藏掉

内联表单：

Form-group 设置了这个边框与下一个边框的距离是15px

单选框要这样写，要不然排版会有问题

From-inline是水平排列

Control-label是让用户名和边框那边没有大的间距

在文本域中：

From-control是把文本框直接占满容器的100% 就不用设置cols，不管用的,可以设置行rows

代码如下：

多选框用法以及实例：

单选框用法以及实例：

在使用checkbox和radio的时候大家一定要注意写法：

这样有利于控制

的间距，这样写是bootstrap定义好的，放大缩小都不会乱

checkBox:

默认纵向排列：

想要默认选中谁，就写个checked就行了，在HTML5中，不需要再给它值

这些都是bootstrap给我们定义的标准，所以以后要写单选框还是多选框的时候都按这个标准来写。

步骤：首先在div里面给类选择器，checkBox或者radio.然后在lable把文字，单选或者多选的按钮给括起来。

接下来学习水平排列的checkBox和radio。

在lable标签中指定”checkbox-inline” 也可以用radio-inline

静态控件：

如果需要在表单中将一行纯文本和lable元素放置于同一行，为<p>元素添加.from-control-static类即可。

控件的状态：

焦点状态

禁用状态

被禁用的fieldset

只读状态

校验状态

接下来一一示范：

这个autofocus的作用就是页面一加载完毕就焦点集中在这个框框上。获取焦点的状态。

placeholder=”输入电话号”就是在文本框里会出现

加一个disable属性,就是这个属性被禁掉的意思，点击这个输入电话号没反应

如果在表单里面加fileset disable属性的话，那么整个表单都没有作用

</div>

</div>

</div>

</div>

</div>

<div>

</div>

<div>

</div>

</fieldset>

</form>

</div>

readonly只读状态

和disable作用差不多，disable是禁用状态

--------------------------------------------------------------

has-success（绿色）校验状态 has-warning警告色 has-error

这个框框变成了绿色边框，还有其他几个样式

为表单控件增加额外的小图标：

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。

现在我们自己做一个小例子：

先设置在表单里写一个文本框：

然后需要在外层的div上加一个 has-feedback 对小图标进行定位

然后在input后面增加一个span标签

想用其他图标的话可以上去Bootstrap中文网，然后点击组件这一栏下面有可用的图标，

使用方法：

想用哪一个，就把下面的英文单词复制下来，粘贴到span标签中

总结一下：

记住两步

第一步：在大的div中，from-group后面加一个has-feedback

第二步：在表单控件标签后面加一个span标签，span标签中加图标样式，别忘了还要加from-control-feedback

记不住的时候多看看bootstrap中文网，看看文档。

---------------------------------------------------------------------

如何控制控件的大小？

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

这些标签不仅可以用在select标签中，还可以用在select和textarea标签中

这个是有效果的

它一共有七种样式，可以慢慢去学习

Btn的写法：我们写的时候就是先写btn 再写btn的样式

注意：按钮的大小取决于里面文字的大小加上它的padding

按钮的大小：

也就是在原有的基础上，根据自己的需要再加上这些属性。

多标签对按钮的支持：

显示的结果都是一个按钮。

活动状态：active 按钮就像是一个按下去的状态，颜色深一点

效果：后面那个是加上active的

禁用状态：就是把active改成disabled，禁用状态就是按着按钮之后没有作用

注意:IE9以下的版本这个a标签的禁用状态，超链接依然能用，这是存在的一个问题，需要注意一下。

加上一个class=”img-responsive”后，这个图片就可以随着屏幕来进行变化了。

响应式图片：这个设置的样式就是宽度100%，高度自动。

下面图片的三种形状：

第一个是设置圆角的

第二个是设置成圆形

第三个是加上一个空白的框框

下面学习文本样式：

下面这几个是文本颜色的几种样式：

下面给文字加上背景颜色：

下面学习：辅助图标

定义叉号的按钮，并且有效果这需要两步，一是加上close,二是加×

下面这个也可以实现效果：

还有一个向下的箭头：caret

接下来学习内容的浮动：

左浮右浮居中的一些样式

visible-sm是在小屏幕下面显示这个信息

hidden是隐藏的意思，hidden-md是在中等屏幕下隐藏

下面说bootstrap的组件：

使用发小图标很简单，上去bootstrap中文网

找组件下面就有图标

一般图标应用在ul,li,span标签中，你想使用哪个标签，就把他下面的单词复制下来，写到class中

例如：

应用场景：可以在各种元素中使用，比如说，按钮中

在工具栏中也可以使用：注意是两个div

设置图标大小：

想要变小一点，就把btn-lg改为btn-sx

图标放到按钮中，大小是自动的。

输入框样式：

最开始的一个div占了我们小屏幕的3格，左边空了两格------------<div class=”col-sm-3 col-sm-offset-2”>

Input-group表示是一组输入框

-----------------------------------------------

</span>

</div>

现在学习下拉菜单的用法：

做一个下拉菜单：

给这个下拉菜单添加一个图标：

点击出现下拉菜单：

格式上就是先给一个大的容器dropdown,然后给一个按钮标签或者是a标签都行，图标可加可不加

ul是加具体的下拉列表的每一项，最后不要忘了

再看对齐方式：下拉框默认是左对齐的

要想让它右对齐：

是整体以栅格系统的方式移动

还有事下拉菜单的移动，下面的这个意思就是下拉菜单在这个容器的右边

标题：就是在下拉框中，是选不中的：

分隔线：

就是加一个类选择器-----divider

同时也可以把某个菜单禁掉：

也可以设定它为激活状态：

激活时候背景默认的变成了蓝色，字体为白色。

按钮组：按钮的第一个左上左下是圆角，最后一个边框是右上右下是边框

button和a标签效果是一样的

只需要外层有一个容器，设为btn-group

再看按钮工具栏：

就是先放在btn-toolbar容器里面，这就是工具栏，然后在里面设置多个按钮组

下一个：设置按钮尺寸

可以设置每个按钮尺寸的大小：

也可以设置整个的：

在整个btn的容器上

如果在外面也设置了尺寸，里面也设置了尺寸，外面的会覆盖里面的尺寸大小

设置大小的值有lg,sm,xs这几个值。

下一个：嵌套分组

按钮组可以嵌套下拉框或者是按钮组，都是可以的

垂直分组：在外部的div的“btn-group”后面-vertical,就成垂直的了

如果说在里面再嵌套按钮组，结果仍然是垂直的

自适应分组：

未完待续……

Bootstrap笔记--快速入门1

猜你喜欢