Bootstrap（二）：Bootstrap组件

图标

https://fontawesome.dashgame.com/

按钮组

       <div class="btn-group">
           <button class="btn btn-primary">添加</button>
           <button class="btn btn-warning">修改</button>
           <button class="btn btn-danger">删除</button>
       </div>

输入框组

   <div class="container">
       <div class="input-group">
           <span class="input-group-addon" >@</span>
           <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
           <span class="input-group-addon" >
               <span class="glyphicon glyphicon-triangle-right"></span>
           </span>
       </div>
   </div>

导航

<div class="container">
      <!--nav
               nav-tabs
               nav-pills
              nav-stacked-->
      <ul class="nav nav-stocked">
          <li class="active" ><a href="#">主页</a></li>
          <li><a href="#">主页1</a></li>
          <li><a href="#">主页2</a></li>
      </ul>
  </div>

面包屑导航

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

面板

• class=“panel-heading” 、class=“panel-body”、class=“panel-footer”

• class=“panel panel-情景”

ex:class=“panel panel-success”

<div class="container">


      <div class="panel panel-default">

          <div class="panel-heading">
              用户登录
          </div>
          <div class="panel-body">
               主体
          </div>
          
          <div class="panel-footer">
              <button class="btn btn-success">提交</button>
          </div>

      </div>

练习：使用panel、form、btn等bootstrap元素创建登录窗体

先开个头：

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            用户登录
        </div>
        <div class="panel-body">
            <form class="form-horizontal"><!--相当于栅格系统中的container-->
                <div class="form-group"><!--相当于栅格系统中的row-->
                    <div class="col-md-8"><!--相当于栅格系统中的col-->
                        <div class="input-group">
                            <span class="input-group-addon">用户名</span>
                            <input class="form-control"/>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button class="btn btn-success">提交</button>
        </div>
    </div>
</div>