只要给图片添加 img-responsive 的class属性,图片的宽度就能自动适配你手机屏幕的宽度啦。
2.使用Bootstrap设计响应式页面
我们需要把所有的HTML内容放在一个包含有container-fluidclass名称的div下。
3.通过Bootstrap使文本居中
我们只需要给h2标签添加text-center的class属性,标题文字就可以居中了。
button 标签,并且为它添加 btn 这个class,按钮的文本为"Like"。
btn-primary类是该应用的主要颜色类，这个类的颜色对于那些你希望高亮提示用户的操作上非常有用。
6.Bootstrap按钮多种颜色属性设定
Bootstrap带有几个预定义的按钮颜色。其中btn-info 通常被用在用户比较可能会点击的操作上。
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设计一个头部导航
使用
标签把你的第一张猫咪图片跟h2 标签包含起来,然后创建一个 元素把h2元素包含进去,猫咪图片则放到 标签里,这样,h2 标签跟猫咪图片就处于同一行中了。eg:
CatPhotoApp
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
