使用Bootstrap设计响应式页面
Posted chendi618
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Bootstrap设计响应式页面相关的知识,希望对你有一定的参考价值。
使用Bootstrap也非常简单,你只需要把下面的链接添加到你需要使用Bootstrap来进行布局的应用的头部:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css"/>
通过Bootstrap使图片适配手机显示
<img class="img-responsive" src="/statics/codecamp/images/running-cat.jpg">
通过Bootstrap使文本居中
<h2 class="red-text text-center">your text</h2>//可以使用空格给标签定义多个class
通过Bootstrap添加一个按钮
<button type="submit" class="btn btn-default">Like</button>
//btn-primary /
btn-success
btn-info
btn-warning
btn-danger
btn-link
添加一个Bootstrap块级元素按钮
btn-block
使用Bootstrap做页面布局
<div class="row">//标签设置了row
这个class属性之后,按钮便可并列排列了。
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
以上是关于使用Bootstrap设计响应式页面的主要内容,如果未能解决你的问题,请参考以下文章