5_bootstrap之响应式布局|列表|按钮
5、响应式工具
为针对性地在移动页面上展示和隐藏不同的内容,bootStrap提供响应式工具。
可以让开发人员通过该工具决定,在何种屏幕尺寸下,隐藏或者显示某些元素
帮助手册位置:全局CSS样式---响应式工具
6、列表
BootStrap同样提供了实用的列表样式供开发人员使用。
帮助手册位置:全局CSS样式----排版----列表
.list-inline |
将列表所有元素放置于一行 |
示例:
效果:
7、按钮
BootStrap提供了丰富的按钮样式供开发人员使用。
帮助手册位置:全局CSS样式----按钮
任何HTML元素加上以下样式都会变成对应按钮
.btn btn-default |
示例: <a class="btn btn-default">Link</a> 效果: |
.btn btn-primary |
示例: <a class="btn btn-primary">(首选项)Primary</a> 效果: |
.btn btn-success |
示例: <a class="btn btn-success">(成功)Success</a> 效果: |
.btn btn-info |
示例: <a class="btn btn-info">(一般信息)Info</a> 效果: |
.btn btn-warning |
示例: <a class="btn btn-warning">(警告)Warning</a> 效果: |
.btn btn-danger |
示例: <a class="btn btn-danger">(危险)Danger</a> 效果: |
.active |
表示按钮被点击的样式 示例: <a class=”btn btn-danger active”>(危险)Danger</a> 效果: |
.disabled |
表示按钮被禁用的样式 示例: <a class=”btn btn-danger disabled”>(危险)Danger</a> 效果: |
5_bootstrap之响应式布局|列表|按钮的更多相关文章
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- XAF响应式布局皮肤界面展示
XAF为了对手机.平板电脑的支持,增加了新的响应式布局皮肤支持,这个功能已经出来很久了,对于平板电脑.PC的支持已经很不错了,对于手机的界面还不是很完美. 本篇展示一下当前的效果,让有需要的同学.还没 ...
- 一个菜鸟所喜欢用的响应式布局,操作方便简单、时尚简约,适合新手!(一个Dreamweaver cs6生成响应式布局)
前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式设计的流行,前端开发变得越来越困难,且花费 ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- Bootstrap响应式布局介绍
一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...
- web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- 移动Web之响应式布局的探讨
响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
- 浅谈html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...
- html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为 ...
随机推荐
- spark + cassandra +postgres +codis 大数据方案
1.环境: 1.1.cassandra 集群: 用于日志数据存储 1.2.spark集群: 用户后期的实时计算及批处理 1.3.codis 集群: 用于缓存一些基本数据如IP归属地,IP经纬度等,当日 ...
- shell sort命令
用法:sort [选项]... [文件]...串联排序所有指定文件并将结果写到标准输出. 排序选项: -b, --ignore-leading-blanks 忽略前导的空白区域 -d, --dicti ...
- 雷林鹏分享:Ruby 异常
Ruby 异常 异常和执行总是被联系在一起.如果您打开一个不存在的文件,且没有恰当地处理这种情况,那么您的程序则被认为是低质量的. 如果异常发生,则程序停止.异常用于处理各种类型的错误,这些错误可能在 ...
- HDU-1532 Drainage Ditches (最大流,EK算法模板)
题目大意:最大流的模板题...源点是0,汇点是n-1. 代码如下: # include<iostream> # include<cstdio> # include<cma ...
- UVA-10570 Meeting with Aliens (枚举+贪心)
题目大意:将一个1~n的环形排列变成升序的,最少需要几次操作?每次操作可以交换任意两个数字. 题目分析:枚举出1的位置.贪心策略:每次操作都保证至少一个数字交换到正确位置上. # include< ...
- do-while语句和while的区别
do-while语句是一种后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件.其实就是,代码在刚开始执行的时候,都是要先走一遍do循环体内的代码,然后在与while里面的条件进行判断,成 ...
- 看我如何快速学习.Net(高可用数据采集平台)
最近文章:高可用数据采集平台(如何玩转3门语言php+.net+aauto).高并发数据采集的架构应用(Redis的应用) 项目文档:关键词匹配项目深入研究(二)- 分表思想的引入 吐槽:本人也是非常 ...
- L194
For many of us, asking for help is it difficult concept. We may feel as if we are admitting a weakne ...
- 把mac地址转换为标准mac地址
把"00:90:8A:1D:30:51"转换成"00-90-8A-1D-30-51",如何格式错误,显示出格式错误的种类,有些不规范的转换成规范的格式,例如,& ...
- asp.net 操作word 权限
1.先安装office 2.在“DCOM配置”中,为IIS账号配置操作Word(其他Office对象也一样)的权限: 开始>运行>输入 dcomcnfg >确定 具体操作:“组件 ...