zoukankan      html  css  js  c++  java

  • day 55 bootstrap应用

    bootstrap

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

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

    示例

    栅栏系统

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

    图书管理系统页面

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

    图书管理系统

    新增 
                        </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>

    插件图标应用举例

    Title
        <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">
    45% Complete

    Panel title

    Panel content 
        <nav class="navbar navbar-default">
    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 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>

        <!-- Button trigger modal -->

    </div>
    # id 名称 价格 操作
    1 1 三国演义 998
    1 1 三国演义 998
    1 1 三国演义 998
    1 1 三国演义 998
    1 1 三国演义 998
    1 1 三国演义 998
  • 相关阅读:
    java中Map遍历的四种方式
    Java从网络读取图片并保存至本地
    spring整合问题分析之Write operations are not allowed in readonly mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.
    element 中table表格多选，翻页或者切换不同数据后保存之前选择的数据并返显选中的状态
    nvm的安装与使用（Mac 版）
    常用正则表达式
    uniapp开发微信小程序
    关于elementui select组件change事件只要数据变化就会触发的解决办法
    elementui的表单重置方法resetFields()的坑
    Element中vfor动态数据循环表单验证的处理
  • 原文地址：https://www.cnblogs.com/wwei4332/p/11692000.html
Copyright © 2011-2022 走看看