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. bootstrap-table 表头和内容对不齐解决办法

    偶然机会学习bootstrap,表格利用bootstrap-table实现,使用bootstrap-table过程中,发现了一个非常棘手的问题,在ie浏览器中,表格的表头和内容对不齐,特别是列比较多且 ...

  2. margin 如何居中

    #id { margin-left: auto; margin-right: auto;width:100px}一定得增加width:100px这一个属性.margin:[N]px auto;widt ...

  3. PAT 天梯赛 L2-002 链表去重

    模拟单链表的增删操作 题目链接:https://www.patest.cn/contests/gplt/L2-002 题解 最开始我脑抽用map模拟单链表进行操作,因为这样可以节约空间,并且用了cin ...

  4. hibernate--多对多单向关联 (重点!!!)

    老师和学生的关系, 一个老师对多个学生, 一个学生也对应多个老师. 数据库会需要3个表, 一个老师表, 一个学生表, 一个老师对应学生表. 单向: 老师知道自己有多少学生, 但是学生不知道自己有多少个 ...

  5. Linux终端、控制台复制粘贴

    1. 在终端下:          复制命令:Ctrl + Shift + C  组合键.          粘贴命令:Ctrl + Shift + V  组合键.  2. 在控制台下:        ...

  6. Classification of text documents: using a MLComp dataset

    注:原文代码链接http://scikit-learn.org/stable/auto_examples/text/mlcomp_sparse_document_classification.html ...

  7. CodeForces 625A Guest From the Past

    贪心水题 #include <stdio.h> #include <algorithm> #include <string.h> #include <queu ...

  8. 贪心法基础题目 HDU

    贪心算法的基本步骤: 1.从问题的某个初始解出发.2.采用循环语句,当可以向求解目标前进一步时,就根据局部最优策略,得到一个部分解,缩小问题的范围或规模.3.将所有部分解综合起来,得到问题的最终解. ...

  9. ajax常用写法

    $.ajax( url,{ type:"post", data:{},}) .done(function() { alert("success"); }) .f ...

  10. HttpListener 实现web服务端

    1. using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syste ...