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

BootStrape基础使用

时间:2019-07-12 18:49:17      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:必须   com   官网   template   cal   css样式   type   action   word   

 

官网:www.bootcss.com

 

 

一. 全局css样式

栅格系统
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

      <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

  </head>
  <body>

  <div class="container-fluid">
    <div class="row">

        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div>
        <div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div>
        <div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div>
        <div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div>
    </div>
  </div>
  </body>
</html>

 

表单登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
   <div class="container">
       <div class="col-lg-3 thumbnail">
    <form>
           <div class="form-group">
    <label for="username">用户名</label>
    <input type="email" class="form-control" id="username" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住密码
    </label>
  </div>
  <button type="submit" class="btn btn-success">提交</button>
</form>
       </div>
   </div>

<script src="jQuery/js/jquery.js"></script>
</body>
</html>

 表格的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
   <div class="container">
       <div class="thumbnail">
       <table class="table table-striped table-bordered table-hover">
           <tr class="success">
               <th>id</th>
               <th>name</th>
               <th>age</th>
           </tr>
           <tr class="danger">
               <td>1</td>
               <td>ivy</td>
               <td>18</td>
           </tr>
           <tr class="info">
               <td>2</td>
               <td>yvette</td>
               <td>19</td>
           </tr>
       </table>
       </div>
   </div>
<script src="jQuery/js/jquery.js"></script>
</body>
</html>

 

二. 组件

 组件是由一个html,一个css, 一个js组成的一个部分

 Glyphicons 字体图标,不能和其它类一起,只能单独使用,可以通过span标签

  下拉菜单例子

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
   <div class="container">
       <div class="thumbnail">


<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
       </div>
   </div>
<script src="jQuery/js/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

 

 

 

未完待续.............

 

BootStrape基础使用

标签:必须   com   官网   template   cal   css样式   type   action   word   

原文地址:https://www.cnblogs.com/guniang/p/11175861.html

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