首页 > 其他分享 >bootstrap概述

bootstrap概述

时间:2022-11-08 21:11:47浏览次数:47  
标签:bootstrap here 123 link Submit Link 概述

bootstrap样式

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .form{
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="btn">
        <a class="btn btn-default" href="#" role="button">Link</a>
        <input class="btn btn-primary" type="text" value="input按钮">
        <button class="btn btn-danger">btn按钮</button>
    </div>
    <div class="form">
        <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
              <label for="exampleInputFile">File input</label>
              <input type="file" id="exampleInputFile">
              <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox"> Check me out
              </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
    </div>
    <div class="table">
        <table class="table table-striped">
            <thead>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>小红</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>小明</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>小白</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

bootstrap组件

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .search{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="icon">
        <span class="search glyphicon glyphicon-search" aria-hidden="true"></span>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
          </button>
          
          <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
          </button>
    </div>
    <div class="nav">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
              </div>
          
              <!-- 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 -->
          </nav>
          <div class="page">
            <nav aria-label="Page navigation">
                <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>

    <script src="script/jquery-3.6.1.min.js"></script>
    <script src="script/bootstrap.min.js"></script>
    </body>

栅格系统

响应式页面相关

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .item{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="item col-md-4">123</div>
            <div class="item col-md-4">123</div>
            <div class="item col-md-4">123</div>
        </div>
    </div>

    <script src="script/jquery-3.6.1.min.js"></script>
    <script src="script/bootstrap.min.js"></script>
    </body>

标签:bootstrap,here,123,link,Submit,Link,概述
From: https://www.cnblogs.com/ben10044/p/16871223.html

相关文章

  • swiper概述
    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端主要是实现轮播图效果swiper5使用<linkrel="stylesheet"href="css/swiper.min.css">......
  • 【深入浅出 Yarn 架构与实现】2-1 Yarn 基础库概述
    了解Yarn基础库是后面阅读Yarn源码的基础,本节对Yarn基础库做总体的介绍。并对其中使用的第三方库ProtocolBuffers和Avro是什么、怎么用做简要的介绍。一、主要......
  • bootstrap布局
      关于作者:郑云飞(天放),程序员Javaweibo:@tianFang学习路线图 ​​跟我一步一步学习bootstrap​​    ​​bootstrap在网页中使用​​    ​​bootstra......
  • 跟我一步一步学习bootstrap
    关于作者:郑云飞(天放),程序员Javaweibo:@tianFang学习路线图    ​​bootstrap在网页中使用​​    ​​bootstrap布局​​    ​​bootstrap响应式布......
  • Nginx的概述与配置
    一、Nginx概述1、Nginx的特点一款高性能、轻量级web服务•稳定性高•系统资源消耗低高•对HTTP并发连接的处理能力单台物理服务器可支持30000~50000个并发请求2......
  • 操作系统学习笔记——第一章 操作系统概述
    在学习操作系统时总结了笔记,并分享出来,特别是蓝色和红色字体。有问题请及时联系博主:​​Alliswell_WP​​,转载请注明出处。参考书:《操作系统》谌卫军等,清华大学出版社,2012年......
  • el-input的宽度修改——使用el-col layout bootstrap栏栅布局
    1questionel-input修改长度2Method参照了Bootstrap的响应式设计,预设了五个响应尺寸:xs、sm、md、lg和xl。xs:特小,手机端sm:小于浏览器一半宽度md:浏览器......
  • python测试开发django-198.bootstrap-formvalidation校验成功发ajax请求
    前言form表单提交按钮是type="submit"类型,输入框按回车会自动提交表单。如果我们想自定义提交表单,可以使用ajax提交。Form表单一个登录页面的Form表单<fo......
  • R语言参数自抽样法Bootstrap:估计MSE、经验功效、杰克刀Jackknife、非参数自抽样法可视
     相关视频:什么是Bootstrap自抽样及应用R语言线性回归预测置信区间实例什么是Bootstrap自抽样及R语言Bootstrap线性回归预测置信区间,时长05:38参数引导:估计MSE统计学问题......
  • 测试框架概述
                    ......