bootstrapbootstrap按钮bootstrap图像

来源：互联网发布：淘宝手机评价管理登录编辑：程序博客网时间：2024/06/01 13:05

[html] view plaincopy

<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">
<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="http://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>
<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>
<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>
<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>

0 0