Heim >Web-Frontend >HTML-Tutorial >Bootstrap全局CSS样式之按钮和图片_html/css_WEB-ITnose

Bootstrap全局CSS样式之按钮和图片_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:40:171137Durchsuche

.btn-default??按钮的默认样式;

.btn-primary??按钮的首选样式;

.btn-success??按钮的成功样式;

.btn-info??按钮的一般信息样式;‘

.btn-warning??按钮的警告样式;

.btn-danger??按钮的危险样式;

.btn-link??按钮的链接样式;

.btn-lg??大按钮样式;

.btn-sm??小按钮样式;

.btn-xs??超小按钮样式;

.btn-block??将按钮设置为充满父元素;

.active??设置按钮为激活状态;

.disabled??设置按钮为禁用状态;

.img-circle??将图片设置为圆形;

.img-rounded??为图片设置为圆角;

.img-thumbnail??将图片设置为方形;

.img-responsive??为图片添加响应式;

    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1">    <title>CSS全局样式_栅格系统</title>    <link rel="stylesheet" href="bootstrap.min.css" type="text/css"><div class="container">        <p>            <button type="button" class="btn btn-default">(默认样式)Default</button>            <button type="button" class="btn btn-primary">(首选项)Primary</button>            <button type="button" class="btn btn-success">(成功)Success</button>            <button type="button" class="btn btn-info">(一般信息)Info</button>            <button type="button" class="btn btn-warning">(警告)Warning</button>            <button type="button" class="btn btn-danger">(危险)Danger</button>            <button type="button" class="btn btn-link">(链接)Link</button>        </p>        <p>            <button type="button" class="btn btn-success btn-lg" disabled>success</button>            <button type="button" class="btn btn-success active">success</button>            <button type="button" class="btn btn-success btn-sm">success</button>            <button type="button" class="btn btn-success btn-xs">success</button>        </p>        <button type="button" class="btn btn-success btn-block">success</button>        <a href="#" class="btn btn-primary btn-block">登录</a>        <input class="btn btn-primary btn-block" value="提交">        <img src="images/g.jpg" alt="girl" class="img-circle">        <img src="images/g.jpg" alt="girl" class="img-rounded">        <img src="images/g.jpg" alt="girl" class="img-thumbnail">        <img src="images/937654.jpg" alt="girl" class="img-responsive">
</div>



版权声明:本文为博主原创文章,未经博主允许不得转载。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn