码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap简单使用

时间:2018-07-06 17:57:59      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:img   htm   jquery   ade   type   closed   code   bootstra   art   

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>
按钮

效果图:

技术分享图片

 

bootstrap简单使用

标签:img   htm   jquery   ade   type   closed   code   bootstra   art   

原文地址:https://www.cnblogs.com/chenze-Index/p/9274496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!