HTML5+CSS+Bootstrap学习笔记(三)

引入Bootstrap组件!


使图片适配屏幕

给图片添加img-responsive属性就可以使图片适配任何屏幕


Bootstrap文字

1)文字居中

给文字添加text-center属性就可以使文字居中

your text

2)文字颜色

给文字添加text-primary、text-info、text-danger都会使其具有相应的颜色

CatPhotoApp

3)在一句话中只改变一个单词的颜色

通过span元素将类添加到目标单词

Top 3 things cats hate:

Bootstrap按钮

平滑的btn

btn类型按钮具有更加平滑的边界


白色带边界的btn-default

btn-default类型按钮具有白色框与黑色边


块级的btn-block

通常情况下,你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素,你的按钮将会伸展并填满页面整个水平空间
添加块级class:btn-block


深蓝色的btn-primary

深蓝色btn-primary被用在那些用户主要采取的操作上


浅蓝色的btn-info

浅蓝色btn-info 被用在那些用户可能会采取的操作上


红色的的btn-danger

红色btn-danger被用来提醒用户该操作具有“破坏性”,例如删除一张猫的图片


多个元素放入一行

实现将多个元素(一般为按钮、标签等元素)放入一行并指定各个元素的相对宽度的需求
使用div的row框架将要放到一行的按钮嵌套起来,然后分别用多个div class=col-xs-* (其中 xs 是 extra small 缩写(应用于较小的屏幕,比如手机屏幕)(md为中等屏幕),* 是你需要填写的数字,代表在一行中,各个元素应该占的列宽)将各个元素嵌套

 

Font Awesome图标库

1)增添方法

2)插入图标

插入info元素到button中


插入大拇指元素


插入垃圾桶元素


插入小飞机元素


Bootstrap提交组件

给你表单的文本输入框input元素增加form-control的class,可以使其平滑边界

你可能感兴趣的:(前端盖楼)