bootstrap 按钮 文本 浮动 隐藏

Posted cui-ting

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 按钮 文本 浮动 隐藏的主要内容，如果未能解决你的问题，请参考以下文章

Android 浮动按钮+上滑隐藏按钮+下滑显示按钮

如何在滚动视图中隐藏和取消隐藏 UiViews 中的浮动按钮？

当我尝试在片段中显示或隐藏浮动操作按钮时出错

bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案

如何在键盘打开时隐藏浮动按钮（Android/iOS）？

mdbootstrap：隐藏的浮动按钮覆盖内容