BootStrape基础使用

Posted 2022-04-08 guniang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BootStrape基础使用相关的知识，希望对你有一定的参考价值。

官网：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基础使用的主要内容，如果未能解决你的问题，请参考以下文章

bootstrape如何实现跳转页面到指定TAB？