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. FatMouse's Speed 基础DP

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. STM32开发指南-跑马灯实验

    简单对I/O口的控制,主要通过对寄存器的读写控制.主要通过I/O的寄存器来控制:1. 控制I/O的方向2. 控制I/O的输出电平或上下来电阻3. 存储I/O口当前的输入状态(高低电平) 对使用LED灯 ...

  3. 可用类型的几何对象esriGeometryType Constants

    The available kinds of geometry objects. Constant Value Description esriGeometryNull 0 A geometry of ...

  4. Java基本数据类型和关键字

    变量名第一个字母小写,后面大写. 自动类型转换: 容量小的类型自动转换成容量大的数据类型 byte,short,int->float->long->double byte,short ...

  5. Linux 高可用（HA）集群基本概念详解

    大纲一.高可用集群的定义二.高可用集群的衡量标准三.高可用集群的层次结构四.高可用集群的分类 五.高可用集群常用软件六.共享存储七.集群文件系统与集群LVM八.高可用集群的工作原理 推荐阅读: Cen ...

  6. hibernate---一对一单向外键关联--XML

    Student.java: package com.bjsxt.hibernate; public class Student { private int id; private String nam ...

  7. CentOS7 开源跳板机(堡垒机) Jumpserver

    开源跳板机(堡垒机)Jumpserver 环境 CentOS 7   x64       关闭 selinux  firewalld jumpserver: 172.24.0.14 testserve ...

  8. iOS开发——获取手机当前WiFi名和MAC地址

    获取手机WiFi信息. iOS9以前的方法,还是能用,警告就警告吧!iOS9以后使用的是苹果最新的API框架,NetworkExtension/NEHotspotHelper.h,这个框架,第一次开放 ...

  9. Linux安装php的Redis扩展

    1.安装redis 下载:https://github.com/nicolasff/phpredis/archive/2.2.4.tar.gz 上传phpredis-2.2.4.tar.gz到/usr ...

  10. Android获取手机唯一码

    大部分安卓手机都可以获取手机唯一码,但是有些手机的厂商却禁止了获取手机唯一码的权限,导致我们不能使用手机唯一码作为标识,但遇到一些必须要填的坑,我们也不能不填,所以使用以下方法来填坑,因此我们使用UU ...