bootstrap学习笔记

1.通过Bootstrap使图片适配手机显示

只要给图片添加 img-responsive 的class属性,图片的宽度就能自动适配你手机屏幕的宽度啦。

2.使用Bootstrap设计响应式页面

我们需要把所有的HTML内容放在一个包含有container-fluidclass名称的div下。

3.通过Bootstrap使文本居中

我们只需要给h2标签添加text-center的class属性,标题文字就可以居中了。

4.通过Bootstrap添加一个按钮

button 标签,并且为它添加 btn 这个class,按钮的文本为"Like"。

5.尝试给一个Bootstrap按钮添加颜色

btn-primary类是该应用的主要颜色类，这个类的颜色对于那些你希望高亮提示用户的操作上非常有用。

6.Bootstrap按钮多种颜色属性设定

Bootstrap带有几个预定义的按钮颜色。其中btn-info 通常被用在用户比较可能会点击的操作上。

7.添加一个Bootstrap警告按钮

bootstrap带有几个预定义的按钮颜色。

btn-danger这个按钮的颜色是用来告诉用户,该操作具有一定的危险性，比如删除猫咪照片这样的操作。

添加一个带有btn-danger样式颜色的按钮,并设置其文本为"Delete"。

8.使用Bootstrap做页面布局

我们用到了col-md-* 这个class,这里的md 表示中等,* 是一个数字,指定了元素应该占多少列宽,从图中我们可以看出,设置的是一个中等尺寸宽度的诸如笔记本电脑屏幕上的布局。

回到我们正在优化的Cat Photo App应用中,现在我们使用col-xs-* 这个class属性对按钮进行重新布局,xs 跟md 不同,xs 是指一个屏幕宽度较小的设备,比如手机屏幕之类的。

另外，div 有row col

9.使用Bootstrap设计一个头部导航

使用

标签把你的第一张猫咪图片跟h2 标签包含起来,然后创建一个

元素把h2元素包含进去,猫咪图片则放到

标签里,这样,h2 标签跟猫咪图片就处于同一行中了。

eg:

CatPhotoApp