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之响应式布局|列表|按钮的更多相关文章

  1. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  2. XAF响应式布局皮肤界面展示

    XAF为了对手机.平板电脑的支持,增加了新的响应式布局皮肤支持,这个功能已经出来很久了,对于平板电脑.PC的支持已经很不错了,对于手机的界面还不是很完美. 本篇展示一下当前的效果,让有需要的同学.还没 ...

  3. 一个菜鸟所喜欢用的响应式布局,操作方便简单、时尚简约,适合新手!(一个Dreamweaver cs6生成响应式布局)

    前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式设计的流行,前端开发变得越来越困难,且花费 ...

  4. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  5. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

  6. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  7. 移动Web之响应式布局的探讨

    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...

  8. 浅谈html5 响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...

  9. html5 响应式布局

    一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为 ...

随机推荐

  1. Java IO流-序列化流和反序列化流

    2017-11-05 20:42:06 序列化流:把对象按照流的方式存入文本文件或者在网络中传输. 对象 -- 流数据(ObjectOutputStream) 反序列化流:把文本文件中的流对象数据或者 ...

  2. 查找一个Class到底在那一个jar文件里

    整理自己的一些笔记,发觉这个命令 ,看起来是用来找一个Class到底在那一个jar文件里的. 虽然没有再测一下,估计是好使的. 先在博客园里记下来,防止自己忘掉. findstr /S /M org. ...

  3. sqlserver存储过程分页

    create  procedure [dbo].[SqlPager]@sqlstr nvarchar(4000), --查询字符串@currentpage int, --第N页@pagesize in ...

  4. Rails 5 Test Prescriptions 第10章 Testing for Security

    Web 安全是一个可怕的主题.所有的你的程序都依靠密码学,代码超出了你的控制. 尽管如此,你还是可以控制部分网页安全 --所有的logins和access checks和injection error ...

  5. DataReader 绑定DataGridView有两种方式

    第一种:借助于BindingSourcesqlDataReader Sdr=通过查询函数得到的sqlDataReader类型的数据;BindingSource Bs=new BindingSource ...

  6. 牛客网——F求最大值

    链接:https://www.nowcoder.net/acm/contest/29/F来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...

  7. Netty自定义Encoder/Decoder进行对象传递

    转载:http://blog.csdn.net/top_code/article/details/50901623 在上一篇文章中,我们使用Netty4本身自带的ObjectDecoder,Objec ...

  8. h5桌面通知Notification

    H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...

  9. Javascript 面向对象编程(补充):封装

    Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果 ...

  10. 平衡二叉树,AVL树之代码篇

    看完了第一篇博客,相信大家对于平衡二叉树的插入调整以及删除调整已经有了一定的了解,下面,我们开始介绍代码部分. 首先,再次提一下使用的结构定义 typedef char KeyType; //关键字 ...