关于常用按钮和工具类的实例
贴一些有关源码，!important用来消除一些冲突，用于mixin暂时不知道是啥
// Classes
.pull-left { float: left !important; } .pull-right { float: right !important; }
// Usage as mixins
.element { .pull-left(); } .another-element { .pull-right(); }
// 作为classe使用 .center-block { display: block; margin-left: auto; margin-right: auto; }
// 作为mixin使用 .element { .center-block(); }
// Mixin itself .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Usage as a Mixin .element { .clearfix(); }
// Classes .show { display: block !important; } .hidden { display: none !important; visibility: hidden !important; } .invisible { visibility: hidden; } // Usage as mixins .element { .show(); } .another-element { .hidden(); }
// Usage as a Mixin .skip-navigation { .sr-only(); }
// Usage as a Mixin .heading { .text-hide(); }
按钮和工具类实例
<!DOCTYPE html> <html> <head> <title>04_button.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" media="screen" href="../css/bootstrap.min.css"> <link rel="stylesheet" media="screen" href="../css/bootstrap-theme.min.css"> <script src="../js/jquery-1.11.2.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <h3 class="page-header">按钮</h3> <div class="col-md-3"> <h4>1 基本按钮样式</h4> <button type="button" class="btn btn-default">Default</button>默认<br> <button type="button" class="btn btn-primary">Primary</button>主要<br> <button type="button" class="btn btn-success">Success</button>成功<br> <button type="button" class="btn btn-info">Info</button>信息<br> <button type="button" class="btn btn-warning">Warning</button>警告<br> <button type="button" class="btn btn-danger">Danger</button>危险<br> <button type="button" class="btn btn-link">看似连接其实是个按钮</button> </div> <div class="col-md-4"> <h4>2 按钮尺寸</h4> <p>使用<code>.btn-lg</code>、<code>.btn-sm</code>、<code>.btn-xs</code>可以获得不同尺寸的按钮。</p> <p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p> </div> <div class="col-md-5"> <div class="col-md-12"> <h4>3 满格按钮</h4> <p>通过<code>.btn-block</code>让按钮占满父class设定的宽度</p> <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button> </div> <div class="col-md-12"> <h4>4 点击过状态</h4> <p>添加<code>.active</code>这个class把按钮做成点击过的样子,右边两个是链接</p> <button type="button" class="btn btn-primary btn-md active">Primary button</button> <button type="button" class="btn btn-default btn-md active">Button</button> <a href="#" class="btn btn-primary btn-md active" role="button">Primary link</a> <a href="#" class="btn btn-default btn-md active" role="button">Link</a> </div> </div> <div class="clearfix visible-md visible-xs visible-sm visible-lg"></div> <div class="col-md-6"> <h4>5 禁用</h4> <p>为<code><button></code>添加<code>disabled</code>属性，超链接只需要加<code>.disables</code>这个class <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button> <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a> </div> <div class="col-md-6"> <h4>6 可作为按钮的Html元素</h4> <p><code><a></code>、<code><button></code>或<code><input></code>元素可以添加按钮class。</p> <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> </div> <div class="clearfix visible-md visible-xs visible-sm visible-lg"></div> <h3 class="page-header">工具类</h3> <div class="col-md-3"> <h4>1 关闭按钮</h4> <p>通过使用一个象征关闭的图标，可以用来让模式对话框和警告框消失。</p> <button type="button" class="close" aria-hidden="true">×</button> </div> <div class="col-md-3"> <h4>2 下拉按钮</h4> <p>使用插入符表示下拉的功能和方向。默认插入符会自动反转在dropup菜单。</p> <span class="caret"></span> </div> <div class="col-md-6"> <h4>3 浮动</h4> <p>元素在父class指定宽度浮动。</p> <p>导航条请务必使用<code>.navbar-left</code> 或 <code>.navbar-right。</code></p> <div class="pull-left"><button type="button" class="btn btn-primary btn-md">左左左</button></div> <div class="pull-right"><button type="button" class="btn btn-danger btn-md">右右右</button></div> </div> <div class="clearfix visible-md visible-xs visible-sm visible-lg"></div> <div class="col-md-4"> <h4>4 清除浮动</h4> <p>使用<code>.clearfix</code>清除任意页面元素的浮动。</p> <div class="clearfix">清除浮动（不太好明显展示）</div> </div> <div class="col-md-4"> <h4>5 显示/隐藏</h4> <p>使用<code>.show</code> 和 <code>.hidden</code>可以强制显示或隐藏，<code>只能做用于块级元素</code></p> <div class="show">被显示，下面还有一行未显示</div><br> <div class="hidden">...</div><br> <div class="show">被显示，上面还有一行未显示</div> </div> <div class="col-md-4"> <h4>6 居中</h4> <p>（表格为了看效果）元素设置为 <code>display: block</code></p> <p>并通过设置<code>margin</code>使其居中。</p> <table class="table table-bordered"> <tr><td> <div class="center-block" style="background-color: pink;">粉色块在表格中自动居中</div> </td></tr> </table> </div> <div class="clearfix visible-md visible-xs visible-sm visible-lg"></div> <div class="col-md-6"> <h4>7 针对屏幕阅读器</h4> <p>使用<code>.sr-only</code>可以针对<code>除了屏幕阅读器之外的所有设备</code>隐藏一个元素。</p> <p>下面有一句Skip to main content已经被隐藏</p> <a class="sr-only" href="#content">Skip to main content</a> <p>上面有一句Skip to main content已经被隐藏</p> </div> <div class="col-md-6"> <h4>8 图片替换</h4> <p>使用<code>.text-hide</code> class可以将页面元素所包含的文本内容替换为背景图。</p> <p>文本已经被隐藏，只显示了图片</p> <h1 class="text-hide">Custom heading<img src="../image/znufe.jpg"></h1> </div> </div> </div> </body> </html>
效果如下
