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 手风琴搭配导航条实现常用菜单栏

    效果 HTML代码 <div class="sidebar"> <div class="mc-search"> <div clas ...

  2. 让你的MyEclipse具有jquery自动提示

    想让你的MyEclipse支持Jquery的自动提示更简单一些,照下图完成即可:      照上面图示已经完成了Jquery自动提示的配置,此时spket已经有两种AJAX库的自动提示,通过右边的De ...

  3. 之一 select模型

    // select.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <WinSock2.h> #include ...

  4. Raspberry Pi 上使用WN725N连接WIFI

    系统版本 lee@Lee-RPi ~ $ uname -ar Linux Lee-RPi + # PREEMPT Thu Dec :: GMT armv6l GNU/Linux 这个版本的系统,已经集 ...

  5. 浏览器兼容问题 chrome iframe location href

    报了个错 var dt2=new Date(d2Arr[0],d2Arr[1],d2Arr[2]); if(dt1>dt2){//比较日期 alert("开始日期不能晚于结束日期!&q ...

  6. CodeForces 610D Vika and Segments

    模板题,矩形面积并 #include <iostream> #include <cstring> #include <cstdio> #include <al ...

  7. jar2exe 配置jre

    http://www.regexlab.com/zh/jar2exe/support.htm

  8. [iOS]C语言技术视频-01-变量的定义

    下载地址: 链接: http://pan.baidu.com/s/1eQJaVwY 密码: c7j8

  9. AsParallel 用法

    http://www.cnblogs.com/leslies2/archive/2012/02/08/2320914.html AsParallel 通常想要实现并行查询,只需向数据源添加 AsPar ...

  10. nginx 生成 缩略图 and 生成缩略图到硬盘

    nginx  编译的时候增加  ./configure --with-http_image_filter_module 配置如下 server { listen     80; server_name ...