首页 > 代码库 > bootstrap_09按钮_表单

bootstrap_09按钮_表单

2024-07-04 04:21:02   229人阅读

<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<title>益司CMS-PC与手机建站集成</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!--<link href="http://www.mamicode.com/__PUBLIC__/bootstrap/css/bootstrap-theme.css" rel="stylesheet" />-->
<!--[if It IE 9]>
    <script src="http://www.mamicode.com/http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body">
<div class="container">
<!--
-->
<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn btn-primary">向左</button>
        <button class="btn btn-primary">居中</button>
        <button class="btn btn-primary">向右</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-primary">向左</button>
        <button class="btn btn-primary">居中</button>
        <button class="btn btn-primary">向右</button>
    </div>
</div>   
 <h1 class="page-header">不同样式的按钮</h1>
 <p>
    <button class="btn btn-default">btn-default</button>
    <button class="btn btn-primary">btn-primary</button>
    <button class="btn btn-success">btn-success</button>
    <button class="btn btn-info">btn-info</button>
    <button class="btn btn-warning">btn-warning</button>
    <button class="btn btn-danger">btn-danger</button>
    <button class="btn btn-link">btn-link</button>
 </p>
 <h1 class="page-header">不同尺寸的按钮</h1>
 <p>
    <button class="btn btn-primary btn-lg">btn-lg</button>
    <button class="btn btn-primary btn-sm">btn-sm</button>
    <button class="btn btn-primary btn-xs">btn-xs</button>
 </p>
 <h1 class="page-header">块级按钮</h1>
 <p>
    <button class="btn btn-primary btn-lg btn-block">btn-block</button>
 </p>
 <h1 class="page-header">活动状态</h1>
 <p>
    <button class="btn btn-primary  active">activity</button>
 </p>
 <h1 class="page-header">禁用状态</h1>
 <p>
    <button class="btn btn-primary  disabled">disabled</button>
 </p>
      
 <pre class="pre">
跨浏览器表现
作为最佳实践，我们强烈建议尽可能使用&lt;button&gt;元素以确保跨浏览器的一致性样式。
出去其它原因，这个Firefox的bug让我们无法为基于&lt;input&gt;标签的按钮设置line-height，这导致在Firefox上，他们与其它按钮的高度不一致。
 </pre>
      
</div>
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>


联系
我们