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月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为 ...
随机推荐
- JavaScript权威指南--window对象
知识要点 window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一部分 ...
- RHEL7.X 安装 11.2.0.4 RAC 问题
随着Linux 7 版本的普及,但Oracle数据库主流版本仍是11gR2,11.2.0.4 是生产安装首选.由于11.2.0.4对Linux 7 的支持不很完美,在Linux 7 上安装会遇到几处问 ...
- 【hive】分组求排名
分组求排名 相信好多使用Mysql的用户一定对分组求排名的需求感到发怵. 但是在hive或者oracle来说就能简单实现. 采用窗口函数:rank() over() / row_number() ov ...
- 终于知道为什么我的mysql总是卸载的不干净以及老是找不到my.ini文件
感谢博主: http://blog.sina.com.cn/s/blog_6fc5bfa90100qmr9.html 如果你的电脑里装过MySQL,想再重新安装MySQL的时候可能就会因为前一版本卸载 ...
- 在jenkins和sonar中集成jacoco(四)--在sonar中集成jacoco
首先要得到之前的单元测试和集成测试的覆盖率文件,还有对应的class文件以及单元测试的覆盖率报告,材料准备齐全之后,使用如下命令: build.xml 1 2 3 4 5 6 7 8 9 10 11 ...
- 第13课:HTML基础之DOM操作2
1. 1)d.innerHTML:标签中的所有内容 删除某个标签 a)可以直接修改innerHTML的值: b) 2)d.innerText:标签中的文本内容 3)input.value='aaa' ...
- 福大软工 · 第十一次作业 - Alpha 事后诸葛亮
拖鞋旅游队团队事后诸葛亮会议 前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10054510.html 时间:2018-12-1 20:00 地 ...
- Git Error: warning: refname 'origin/branch-name' is ambiguous.
When this happened, it created the file .git/refs/heads/origin/branch-name. So, I just deleted the f ...
- IO综合练习--文件切割和文件合并
有时候一个视频文件或系统文件太大了,上传和下载可能会受到限制,这时可以用文件切割器把文件按大小切分为文件碎片, 等到要使用这个文件了,再把文件碎片合并成原来的文件即可.下面的代码实现了文件切割和文件合 ...
- vi/vim使用进阶: 在VIM中使用GDB调试 – 使用vimgdb
vi/vim使用进阶: 在VIM中使用GDB调试 – 使用vimgdb << 返回vim使用进阶: 目录 本节所用命令的帮助入口: :help vimgdb 在UNIX系统最初设计时,有一 ...







