day 55 bootstrap应用

bootstrap

bootstrap是基于JQuery封装的所以引入bootstrap之前必须引入JQuery

常用的图标网站
fontawesome
插件网站
sweetalter

示例

栅栏系统

    </div>
    <div class="col-md-2 c1"></div>
</div>

图书管理系统页面

Toggle navigation Brand

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <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>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <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>
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

图书管理系统

Search

新增

                    </tbody>
                </table>
                <nav aria-label="Page navigation" class="text-center">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

插件图标应用举例

    <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
    <p> <mark>highlight</mark> sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    <p class="lead">中心事项</p>
    <del>This line of text is meant to be treated as deleted text.</del>
    <s>This line of text is meant to be treated as no longer accurate.</s>
    <div class="text-center">egon dsb</div>

    <abbr title="dsb">egon</abbr>
    <address>
      <strong>兵哥</strong><br>
      <a href="mailto:#">12321344@qq.com</a>
    </address>

    <ul class="list-unstyled list-inline">
      <li>123123</li>    <li>123123</li>
        <li>123123</li>
            <li>123123</li>
    </ul>
    <pre>print(123)</pre>
    <table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
        </thead>
        <tbody>
        <tr class="success">
            <td>老王</td>
            <td>20</td>
            <td>戴墨镜</td>
        </tr>
          <tr>
            <td>饼哥</td>
            <td>20</td>
            <td>淫诗</td>
        </tr>
        <tr>
            <td>饼哥</td>
            <td>20</td>
            <td>淫诗</td>
        </tr>

        </tbody>
    </table>
      <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">

    <a class="btn btn-success" href="#" >Link</a>
    <button class="btn btn-danger" type="submit">Button</button>
    <input class="btn btn-primary" type="button" value="Input">
    <input class="btn btn-default btn-lg" type="submit" value="Submit">
    <span class="glyphicon glyphicon-trash" style="color: red;"></span>
    //图标网站
    <i class="fa fa-bath  fa-5x" aria-hidden="true"></i>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger <span class="caret"></span></button>
    <nav aria-label="Page navigation">

• «
• 1
• 2
• 3
• 4
• 5
• »

• «
• 1 (current)
...

45% Complete

Panel title

Panel content

Dropup

• Action
• Another action
• Something else here
• Separated link

    <nav class="navbar navbar-default">

Toggle navigation Brand

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <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>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <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>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

• Home
• Help
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

    <div class="bs-example" data-example-id="nav-pills-with-dropdown">
<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Help</a></li>
  <li role="presentation" class="dropdown open">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <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>
  </li>
</ul>

点我弹出/隐藏弹出框

Previous Next

    <!-- Button trigger modal -->

Launch demo modal

×

立即登入

退出 登入

</div>

#	id	名称	价格	操作
1	1	三国演义	998	编辑 删除
1	1	三国演义	998	编辑 删除
1	1	三国演义	998	编辑 删除
1	1	三国演义	998	编辑 删除
1	1	三国演义	998	编辑 删除
1	1	三国演义	998	编辑 删除