首页 > 其他 > 详细

2018-01-29(Bootstrap)

时间:2018-01-29 21:56:35      阅读:223      评论:0      收藏:0      [点我收藏+]

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-primaryclass属性。

友情提醒:这个按钮仍然需要 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。

 

2018-01-29(Bootstrap)

原文:https://www.cnblogs.com/jy13638593346/p/8378623.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!