2018-01-29(Bootstrap)
1.
是不是觉得图片太大了?是不是觉得如果图片的尺寸刚好能适应手机屏幕宽度就好棒棒?
其实很简单的,通过Bootstrap,我们只要给图片添加 img-responsive
的class属性,图片的宽度就能自动适配你手机屏幕的宽度啦。
2.
Bootstrap除了可以使图片自适应以外,还可以很简单的让头部标题的文字居中,使标题看起来更美观。我们只需要给h2
标签添加text-center
的class属性,标题文字就可以居中了。
友情提醒:你可以使用空格给标签定义多个class,就像下面这样:
<h2 class="red-text text-center">your text</h2>
3.
通常情况下,button
标签的宽度会与标签内包含的文字长度一致
如果你想是你的button
标签的宽度充满整个屏幕,你可以使用btn-block
这个class讲按钮升级为块级元素,使button
标签的宽度充满整个屏幕,并且该元素后面的所有元素都会浮动到下一行。
友情提醒:这些按钮仍然需要 btn
class。
btn-primary
类是该应用的主要颜色类,这个类的颜色对于那些你希望高亮提示用户的操作上非常有用。
为按钮添加btn-primary
class属性。
友情提醒:这个按钮仍然需要 btn
和 btn-block
来两个属性!
4.
Bootstrap带有几个预定义的按钮颜色。其中btn-info 通常被用在用户比较可能会点击的操作上。
在 "Like" 按钮下面创建一个新的块级按钮,文本为"Info",并将class属性btn-info 和 btn-block添加给它。
友情提醒:所有这些按钮仍然需要 btn 和 btn-block class属性
5.
Bootstrap带有几个预定义的按钮颜色。
btn-danger
这个按钮的颜色是用来告诉用户,该操作具有一定的危险性,比如删除猫咪照片这样的操作。
添加一个带有btn-danger
样式颜色的按钮,并设置其文本为"Delete"。
友情提醒:这些button的标签仍然需要 btn
与 btn-block
这两个class。