- <div><pre code_snippet_id="329941" snippet_file_name="blog_20140506_1_7183434" name="code" class="html"><!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 按钮</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
- <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
- <script src="bootstrap/js/jquery.js"></script>
- <script src="bootstrap/js/bootstrap.min.js"></script>
- </head>
- <body>
- <h3>按钮大小</h3>
- <p>
- <button class="btn btn-large btn-primary">large button</button>
- <button class="btn btn-large">large button</button>
- </p>
- <p>
- <button class="btn btn-primary">default button</button>
- <button class="btn">default button</button>
- </p>
- <p>
- <button class="btn btn-small btn-primary">small button</button>
- <button class="btn btn-small">large button</button>
- </p>
- <p>
- <button class="btn btn-mini btn-primary">mini button</button>
- <button class="btn btn-mini">default button</button>
- </p>
- <h3>块级按钮</h3>
- <button class="btn btn-large btn-primary btn-block">Block level button</button>
- <button class="btn btn-large btn btn-block">Block level button</button>
- <br>
- <p>
- <button class="btn btn-primary disabled">disabled button</button>
- <button class="btn btn-primary disabled" disabled="disabled">disabled button</button>
- </p>
- <h3>图片</h3>
- <p>
- <img src="images/scenery.jpg" width="200" height="120" class="img-rounded"><br><br>
- <img src="images/scenery.jpg" width="200" height="120" class="img-circle"><br><br>
- <img src="images/scenery.jpg" width="200" height="120" class="img-polaroid">
- </p>
- </body>
- </html></pre><br>
- <div></div>
- <pre></pre>
- <pre code_snippet_id="329941" snippet_file_name="blog_20140506_2_2800562" name="code" class="html">效果预览:</pre><pre code_snippet_id="329941" snippet_file_name="blog_20140506_3_2877009" name="code" class="html"><img src="https://img-blog.csdn.net/20140506155948625?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTE3NTQxMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
- </pre><pre code_snippet_id="329941" snippet_file_name="blog_20140506_4_9921813" name="code" class="html"><pre code_snippet_id="329941" snippet_file_name="blog_20140506_4_9921813" name="code" class="html"></pre><br>
- <pre></pre>
- <pre code_snippet_id="329941" snippet_file_name="blog_20140506_5_388585" name="code" class="html"></pre>bootstrap为按钮添加了很多样式,默认按钮样式.btn的类,通过btn-large/btn-small/btn-mini这些类可以改变按钮的大小。如果相容按钮以块级元素的形式显示,可以添加btn-block这个类,禁用按钮只需添加一个.disable类。此外,bootstrap还为图像提供了三个 class 用于呈现带有明确样式的图像:img-rounded,添加此类可以使图像呈现圆角的样式;img-polarid,添加此类,图像外面的一段距离内就有一层边框线;img-circle,添加此类,能使图像以圆形或椭圆形的样式呈现。</pre>
- </div>
- <!-- Baidu Button BEGIN -->
- <div class="bdsharebuttonbox" style="float: right;">
- <a href="#" class="bds_more" data-cmd="more" style="background-position:0 0 !important; background-image: url(http://bdimg.share.baidu.com/static/api/img/share/icons_0_16.png?v=d754dcc0.png) !important"></a>
- <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间" style="background-position:0 -52px !important"></a>
- <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博" style="background-position:0 -104px !important"></a>
- <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博" style="background-position:0 -260px !important"></a>
- <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网" style="background-position:0 -208px !important"></a>
- <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信" style="background-position:0 -1612px !important"></a>
- </div>
- <script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
- <!-- Baidu Button END -->
- <!--192.168.100.35-->
- <ul class="article_next_prev">
- <li class="prev_article"><span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian']);location.href='/u011175410/article/details/25132865';">上一篇</span><a href="/u011175410/article/details/25132865" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian'])">bootstrap搜索图标的使用</a></li>
- <li class="next_article"><span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian']);location.href='/u011175410/article/details/25141145';">下一篇</span><a href="/u011175410/article/details/25141145" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian'])">bootstrap简单的页面Demo1</a></li>
- </ul>
- <!-- Baidu Button BEGIN -->
- <script src="http://bdimg.share.baidu.com/static/js/bds_s_v2.js?cdnversion=397358" type="text/javascript" id="bdshare_js" data="type=tools&uid=1536434"></script>
- <script type="text/javascript">
- document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
- </script>
- <!-- Baidu Button END -->
bootstrapbootstrap按钮bootstrap图像
最新推荐文章于 2024-03-17 18:01:57 发布