bootstrap 按钮 文本 浮动 隐藏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">

</head>

<body>

    <div class="container">

        <p class="btn-primary">按钮颜色与大小</p>

        <button class="btn btn-default" type="button">Default</button>

        <button class="btn btn-primary" type="button">primary</button>

        <button class="btn btn-success" type="button">success</button>

        <button class="btn btn-info" type="button">info</button>

        <button class="btn btn-warning" type="button">warning</button>

        <button class="btn btn-danger" type="button">danger</button>

        <button class="btn btn-link" type="button">link</button>

        <button class="btn btn-default" type="button">Default</button>

        <button class="btn btn-default btn-lg" type="button">Default btn-lg</button>

        <button class="btn btn-default btn-sm" type="button">Default btn-sm</button>

        <button class="btn btn-default btn-xs" type="button">Default btn-xs</button>

        <button class="btn btn-default btn-block" type="button">Default-btn-block</button>

        <p class="btn-primary">活动状态</p>

        <button class="btn btn-default active" type="button">Default</button>

        <button class="btn btn-primary active" type="button">primary</button>

        <button class="btn btn-success active" type="button">success</button>

        <button class="btn btn-info active" type="button">info</button>

        <button class="btn btn-warning active" type="button">warning</button>

        <button class="btn btn-danger active" type="button">danger</button>

        <button class="btn btn-link active" type="button">link</button>

        <p class="btn-primary">禁用状态</p>

        <button class="btn btn-primary" type="button" disabled="disabled">button disabled</button>

        <button class="btn btn-primary disabled " type="button">button disabled</button>

        <p class="btn-primary">图像</p>

        <img class="img-rounded" src="a.jpg">

        <img class="img-circle" src="a.jpg">

        <img class="img-thumbnail" src="a.jpg">

        <p class="btn-primary">文本样式及背景样式</p>

        <p class="text-muted">text-muted</p>

        <p class="text-primary">text-primary</p>

        <p class="text-success">text-success</p>

        <p class="text-info">text-info</p>

        <p class="text-warning">text-warning</p>

        <p class="text-danger">text-danger</p>

        <p class="text-danger">text-danger</p>

        <p class="bg-primary">bg-primary</p>

        <p class="bg-success">bg-success</p>

        <p class="bg-info">bg-info</p>

        <p class="bg-warning">bg-warning</p>

        <p class="bg-danger">bg-danger</p>

        <p class="bg-primary">辅助图标</p>

        <button class="close" type="button">close</button>

        <a href="" class="close">close</a>

        <span class="caret">close</span>

        <p class="bg-primary">内容浮动</p>

        <p class="pull-left">pull-left</p>

        <p class="pull-right">pull-right</p>

        <p class="clearfix">clearfix</p>

        <p class="center-block">center-block</p>

        <p class="bg-primary">隐藏与显示</p>

        <p class="show">show</p>

        <p>before invisible</p>

        <p class="invisible">invisible</p>

        <p>after invisible</p>

        <p>before hidden</p>

        <p class="hidden">hidden</p>

        <p>after hidden</p>

        <p>before text-hide</p>

        <p class="text-hide">text-hide</p>

        <p>after text-hide</p>

    </div>

</body>

</html>

bootstrap 按钮 文本 浮动 隐藏的更多相关文章

  1. Bootstrap 按钮，图片，辅助类

    Bootstrap 按钮 任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a&g ...

  2. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  3. 设置text-overflow文本溢出隐藏时的对齐问题

    设置text-overflow: ellipsis后引起的文本对齐问题 最近在做网页的时候用到了文本溢出隐藏的功能,但是出现了一些小问题,下面先放上示例代码吧. <p> <span ...

  4. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  5. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  6. 第二百四十七节，Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一．按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  7. Bootstrap 按钮

    本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...

  8. (ios实战) UINavigationBar 返回按钮 文本自定义实现

    在实际开发过程, 我们使用navigationController时,上一个标题过长,导致下一个界面的返回按钮文本过长,比较难看,如果标题取名过短,又不能完全表达含义. 下面时如何实现返回按钮的Tit ...

  9. uploadify不能正确显示中文的按钮文本的解决办法

    uploadify 目前不能正确显示中文的按钮文本. 我发现bug的原因是uploadify错误的使用了 js 的 escape 和 flash 的 unescape配对,而这2个是不兼容的.正确的转 ...

随机推荐

  1. reactor 类库，基于事件编程

    https://github.com/reactor https://github.com/reactor/reactor-samples/ https://github.com/ReactiveX/ ...

  2. Android USER 版本与ENG 版本的差异--MTK官方解释

     分类: Android(4)  Description]Android USER 版本与ENG 版本的差异 [Keyword]USER ENG user eng 用户版本 工程版本 差异 [Solu ...

  3. angularJs-UI-bootstrap系列教程1（使用前的准备）

    之前一直想看看angular中Ui-bootstrap是如何使用的,但是苦于网站被墙了,一直看不到,最近偷偷的到墙外面看了一下文档,大致的了解了如何使用,在这里写这边文章主要就是为了那些被墙了的ang ...

  4. 引用dll文件要复制到本地

    引用dll文件要复制到本地,以便发给他人用时缺失dll文件出错.

  5. （H5）FormData+AJAX+SpringMVC跨域异步上传文件

    最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...

  6. 使用msm文件创建msi

    一.不使用merge module的ModuleSubstitution和ModuleConfiguration 1.创建MyMsm.msm <?xml version="1.0&qu ...

  7. Docker Swarm集群

    Docker Swarm集群 IP 10.6.17.11  管理节点 IP 10.6.17.12   节点A IP 10.6.17.13   节点B IP 10.6.17.14   节点C 安装 Sw ...

  8. tcpdump的表达元

    (nt: True 在以下的描述中含义为: 相应条件表达式中只含有以下所列的一个特定表达元, 此时表达式为真, 即条件得到满足) dst host host如果IPv4/v6 数据包的目的域是host ...

  9. c++异常处理第四篇---不使用try catch语句，使用Loki::ScopeGuard

    转载:神奇的Loki::ScopeGuard 2011-07-05 12:52:05 分类: C/C++ 转载:http://blog.csdn.net/fangqu/article/details/ ...

  10. 【转】 完美配置Tomcat的HTTPS

    Tomcat配置HTTPS的文章到处都有,过程也比较简单,随后文中会转一段过来. 但对于启用APR情况下报异常“java.lang.Exception: Connector attribute SSL ...