bootstrap设计响应式按钮(浏览器变大和变小时按钮变化)
2017-11-16 17:59
471 查看
1.浏览器大窗口的时候
![](https://oscdn.geek-share.com/Uploads/Images/Content/201711/664a8160413a8debf010770e156f04cc.png)
浏览器窗口变小的时候
![](https://oscdn.geek-share.com/Uploads/Images/Content/201711/35acc9db6ccb6182396c1d6e424ab709.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201711/843553d0d70abd396d7810809093edc5.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201711/b9b3a039784967520939ab7f864e3edc.png)
源码:
HTML:
CSS文件:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201711/664a8160413a8debf010770e156f04cc.png)
浏览器窗口变小的时候
![](https://oscdn.geek-share.com/Uploads/Images/Content/201711/35acc9db6ccb6182396c1d6e424ab709.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201711/843553d0d70abd396d7810809093edc5.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201711/b9b3a039784967520939ab7f864e3edc.png)
源码:
HTML:
<div class="col-sm-4 text-right"> <button type="submit" class="btn btn-primary hidden-xs">Log In</button> <button type="submit" class="btn btn-primary btn-block btn-lg visible-xs bk-margin-top-20">Log In</button> </div>
CSS文件:
/* log in 的btn */ .bk-margin-top-20 { margin-top: 20px !important; } .btn-block { display: block; width: 100%; } .btn-lg { border-radius: 3px; padding: 12px 22px; font-style: 17px; line-height: 1.33; }
相关文章推荐
- Bootstrap使用响应式设计(Responsive design)时导航条上部有空白的解决方案
- 模仿支付宝banner平铺浏览器设计效果(自由创建按钮序列)
- Bootstrap删格系统与响应式设计
- 使用 Bootstrap 另一个创建响应式设计的方法,是使用现成的 CSS 框架。
- Bootstrap响应式前端框架笔记五——按钮
- Bootstrap响应式设计在中国-关于移动网站和卓越网站体验的那些事儿
- bootstrap响应式设计简单实践。
- 【Bootstrap】响应式原理和设计
- 前端开发响应式设计之媒体查询(bootstrap)
- css3-自适应页面的实现(响应式设计、响应不同类型设备)、浏览器适配
- Bootstrap3基础 栅格系统 页面布局随浏览器大小的变化而变化
- 分享29个基于Bootstrap的HTML5响应式网页设计模板
- 响应式设计时如何自动阻止移动浏览器自动调整页面大小
- Bootstrap响应式前端框架笔记八——按钮组
- Bootstrap 响应式设计
- bootstrap快速入门笔记(八)-按钮,响应式图片
- bootstrap响应式设计简单实践。
- Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念
- Bootstrap-CSS-按钮-图片-辅助类-响应式
- 设计响应式网站-Bootstrap(1)