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. String类的两种赋值

    java.lang包是java的默认引入包,所以我们不需显式地导包. String s1 = new String("字符串");//创建2个字符串对象,堆中一个,字符串常量池中一 ...

  2. C#代码发送邮件

    本次测试的邮箱为163邮箱 1.首相对邮箱进行一些设置(详见下图):打开设置选取客户端授权密码项,开启设置:以后在客户端登录时将使用刚刚设置的密码! 2.上干货 public static void ...

  3. python 一遍式四则运算

    #!/usr/bin/python #coding: utf-8 INTEGER = 'INTEGER' PLUS = '+' MINUS = '-' MUL = '*' DIV = '/' LC = ...

  4. vim 配置快捷以使复制可用

    "设置快捷以使用xshell的复制 let g_copy_mode = function! CopyToggle() let g:g_copy_mode = set mouse=c set ...

  5. ubuntu下mysql 开启远程连接

    一.修改配置文件: vim /etc/mysql/my.cnf,找到 bind-address = 127.0.0.1 注释掉这行,如: #bind-address = 127.0.0.1 或者改为: ...

  6. ecos的app机制

    底层->支持层->业务 底层base 数据库访问 service管理 app管理 kvstore存储 kvcache缓存 支持层 pam登录验证 dbeav数据库扩展功能 site前台 d ...

  7. clip实现圆环进度条

    效果主要通过clip和transform:rotate实现 把圆环分为左右两个部分,通过角度旋转对图片剪切旋转角度<=180度的时候之旋转右边,当大于180度时右边固定旋转180度的同时旋转左边 ...

  8. 从url中提取参数名和参数值(转)

    在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到.js的实现方法如下: function getValue(url, name) { var reg = new RegExp('(\\?| ...

  9. 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 ...

  10. [iOS Animation]-CALayer 显示动画

    显式动画 如果想让事情变得顺利,只有靠自己 -- 夏尔·纪尧姆 上一章介绍了隐式动画的概念.隐式动画是在iOS平台创建动态用户界面的一种直接方式,也是UIKit动画机制的基础,不过它并不能涵盖所有的动 ...