码迷,mamicode.com
首页 > 其他好文 > 详细

2018-01-29(Bootstrap)

时间:2018-01-29 22:39:26      阅读:315      评论:0      收藏:0      [点我收藏+]

标签:比较   高亮   宽度   ima   btn   告诉   手机屏幕   ons   适应   

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)

标签:比较   高亮   宽度   ima   btn   告诉   手机屏幕   ons   适应   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!