Bootstrap作为twitter推出的前端开发工具包,短时间内便红遍业界。确实它功能强大并且界面美观。
虽然在实际工作中较少会在非服务器端的项目中用到,但是bootsrap依然是值得我们在平常学习研究的优秀框架。
这里整理出了一些bootstrap的组件,供大家参考。
一、工具类:
- <span style="font-family:Arial;font-size:12px;"><!DOCTYPE html>
- <html>
-
- <head>
- <title>Bootstrap 工具类</title>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <link rel="stylesheet" href="../js/bootstrap-3.3.6/dist/css/bootstrap.css">
- <style type="text/css">
- * {
- margin: 0
- }
-
- .divs {
- text-align: center;
- line-height: 75px;
- font-family: "微软雅黑";
- float: left;
- margin: 10px;
- width: 100px;
- height: 75px;
- background-color: #E3E3E3
- }
- </style>
-
- </head>
-
- <body>
- <div class="divs div1">
- <button type="button" class="close" aria-hidden="true">×</button> 关闭按钮
- </div>
-
- <div class="divs div2">
- <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
- 下拉菜单
- <span class="caret"></span>
- </button>
- </div>
-
- <div class="divs pull-left">浮动pull-left</div>
- <div class="divs pull-right">浮动pull-right</div>
-
- <div class="divs show">show/hidden</div>
-
- <div class="center-block" style="width: 150px;background-color: #E3E3E3;">居中center-block</div>
- <div class="sr-only divs" href="#content">Skip to main content</div>
-
-
-
- <script src="../js/jquery-2.1.4/jquery-2.1.4.js"></script>
- <script src="../js/bootstrap-3.3.6/dist/js/bootstrap.js"></script>
- </body>
-
- </html></span>
截图:
二、组件
截图:
三、js
截图:
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。