闲暇下来,学点前端的东西
之前接触过bootstrap,但没有系统的学习。用闲暇时光,学点记点。
之前没有记笔记的习惯,从现在开始让记笔记成为习惯。
1.通过Bootstrap使图片适配手机显示
只要给图片添加 img-responsive
的class属性,图片的宽度就能自动适配你手机屏幕的宽度啦。
2.使用Bootstrap设计响应式页面
我们需要把所有的HTML内容放在一个包含有container-fluid
class名称的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设计一个头部导航
使用<div class="row">
标签把你的第一张猫咪图片跟h2
标签包含起来,然后创建一个<div class="col-xs-8">
元素把h2
元素包含进去,猫咪图片则放到 <div class="col-xs-4">
标签里,这样,h2
标签跟猫咪图片就处于同一行中了。
eg:<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2></div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a></div>
</div>
10.图标 i标签
eg:<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up">Like</i></button>