Let's go

bootstrap简单使用

1.bootstrap实例：

 1 <title>Bootstrap 实例 - 代码</title>
 2 <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 3 <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 4 <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 5 </head>
 6 <body>
 7 <p><code>&lt;header&gt;</code> 作为内联元素被包围。</p>
 8 <p>如果需要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>
 9 <pre>
10    &lt;article&gt;
11       &lt;h1&gt;Article Heading&lt;/h1&gt;
12    &lt;/article&gt;
13 </pre>
14 </body>
15 </html>
View Code

2.按钮：

 1 <html>
 2 <head>
 3 <title>Bootstrap 实例 - 按钮选项</title>
 4 <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 5 <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 6 <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 7 </head>
 8 <body>
 9 <button type="button" class="btn btn-default">默认按钮</button>
10 <button type="button" class="btn btn-primary">原始按钮</button>
11 <button type="button" class="btn btn-success">成功按钮</button>
12 <button type="button" class="btn btn-info">信息按钮</button>
13 <button type="button" class="btn btn-warning">警告按钮</button>
14 <button type="button" class="btn btn-danger">危险按钮</button>
15 <button type="button" class="btn btn-link">链接按钮</button>
16 </body>
17 </html>
按钮

效果图：

 

posted @ 2018-07-06 16:51  chenze  阅读(207)  评论(0)  编辑  收藏  举报
有事您Q我