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

使用Bootstrap设计响应式页面

时间:2019-06-13 01:04:24      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:lin   块级元素   应用   style   min   空格   排列   ike   row   

使用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设计响应式页面

标签:lin   块级元素   应用   style   min   空格   排列   ike   row   

原文地址:https://www.cnblogs.com/chendi618/p/11013521.html

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