bootstarp 应用

一丶bootstrap的使用

下载资源文件:

        <pre><a href='https://v3.bootcss.com/getting-started/#download' target="_blank">bootstrap官网</a></pre>

导入

// 1.导入样式
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
 
 
// 2.导入bootstrap的js,依赖jquery,先导入jquer
<script src="bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>


// 3.导入网络资源
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

   <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

       
   <!--jQuery的导入-->
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 

二丶栅格

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>栅格系统</title>
   <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
   <style>
       .col-md-1, .col-md-3, .col-md-5, .col-md-7, .col-md-9, .col-md-11 {
           height: 50px;
           line-height: 50px;
           border: 1px solid mediumaquamarine;
      }

       .col-md-2, .col-md-4, .col-md-6, .col-md-8, .col-md-10, .col-md-12 {
           height: 50px;
           line-height: 50px;
           border: 1px solid red;
      }

       .col-xs-6 {
           height: 50px;
           line-height: 50px;
           border: 1px solid chartreuse;
      }

   </style>
</head>
<body>
<!--
   栅格参数:
       一共占12个格子,
       居中显示

-->
<div class="container">
   <div class="row">
       <div class="col-md-1 text-center">1</div>
       <div class="col-md-1 text-center">2</div>
       <div class="col-md-1 text-center">3</div>
       <div class="col-md-1 text-center">4</div>
       <div class="col-md-1 text-center">5</div>
       <div class="col-md-1 text-center">6</div>
       <div class="col-md-1 text-center">7</div>
       <div class="col-md-1 text-center">8</div>
       <div class="col-md-1 text-center">9</div>
       <div class="col-md-1 text-center">10</div>
       <div class="col-md-1 text-center">11</div>
       <div class="col-md-1 text-center">12</div>
   </div>
   <div class="row">
       <div class="col-md-2 text-center">1</div>
       <div class="col-md-2 text-center">2</div>
       <div class="col-md-2 text-center">3</div>
       <div class="col-md-2 text-center">4</div>
       <div class="col-md-2 text-center">5</div>
       <div class="col-md-2 text-center">6</div>
   </div>
   <div class="row">
       <div class="col-md-3 text-center">1</div>
       <div class="col-md-3 text-center">2</div>
       <div class="col-md-3 text-center">3</div>
       <div class="col-md-3 text-center">4</div>
   </div>

   <!--从堆叠到水平排列-->
   <div class="row">
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
       <div class="col-md-1">.col-md-1</div>
   </div>
   <div class="row">
       <div class="col-md-8">.col-md-8</div>
       <div class="col-md-4">.col-md-4</div>
   </div>
   <div class="row">
       <div class="col-md-4">.col-md-4</div>
       <div class="col-md-4">.col-md-4</div>
       <div class="col-md-4">.col-md-4</div>
   </div>
   <div class="row">
       <div class="col-md-6">.col-md-6</div>
       <div class="col-md-6">.col-md-6</div>
   </div>


   <!--   流式布局容器 -->
   <div class="container-fluid">
       <div class="row">
           <div class="col-md-6">流式布局容器</div>
           <div class="col-md-6">流式布局容器</div>
       </div>
   </div>
</div>


<!--移动设备和桌面屏幕: 响应式-->

<div class="row">
   <div class="col-xs-12 col-md-8">响应式</div>
   <div class="col-xs-6 col-md-4">响应式</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
   <div class="col-xs-6 col-md-4">响应式</div>
   <div class="col-xs-6 col-md-4">响应式</div>
   <div class="col-xs-6 col-md-4">响应式</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
   <div class="col-xs-6">响应式</div>
   <div class="col-xs-6">响应式</div>
</div>

<!--手机、平板、桌面-->
<div class="row">
   <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   <!-- Optional: clear the XS cols if their content doesn't match in height -->
   <div class="clearfix visible-xs-block"></div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>


<!-- 多余的 列 -->
<div class="row">
   <div class="col-xs-9">.col-xs-9</div>
   <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as
      one contiguous unit.
   </div>
   <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>


<!-- 列偏移 -->
<div class="row">
   <div class="col-md-12">列偏移</div>
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
   <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>


</body>
<script src="bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</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="row">
       <div class="col-md-12">
           <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
               <!-- Indicators -->
               <ol class="carousel-indicators">
                   <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2"></li>
               </ol>

               <!-- Wrapper for slides -->
               <div class="carousel-inner" role="listbox">
                   <div class="item active">
                       <img src="http://www.xiaohuar.com/images/banner/2.jpg" alt="...">
                       <div class="carousel-caption">
                          笑话网
                       </div>
                   </div>
                   <div class="item">
                       <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566317544663&di=556c109264dff8e21a6a6a7154cfa16b&imgtype=0&src=http%3A%2F%2Fpic65.nipic.com%2Ffile%2F20150429%2F20318013_105209450000_2.jpg"
                            alt="时光旅行">
                       <div class="carousel-caption">
                          时光旅行
                       </div>
                   </div>
                   <div class="item">
                       <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566317544670&di=1e2e67d8453e9ec67893e8f13ee5f710&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F54%2F93%2F16pic_5493004_b.jpg"
                            alt="开学季">
                       <div class="carousel-caption">
                          开学季
                       </div>
                   </div>

               </div>

               <!-- Controls -->
               <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                   <span class="sr-only">Previous</span>
               </a>
               <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                   <span class="sr-only">Next</span>
               </a>
           </div>
       </div>
   </div>
</div>
</body>
<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</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">
   <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
   <link rel="stylesheet" href="font_dxgohix8u0r/iconfont.css">

   <style>
       .glyphicon,.iconfont , .fa{
           font-size: 50px;
           color: pink;
      }
   </style>
</head>
<body>
<div class="container">
   <div class="row">
       <div class="col-md-12">
           <!--   bootStrap 矢量字体图       -->
           <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
           <!--   阿里矢量库 矢量字体图       -->
           <span class="iconfont icon-fangshai"></span>
           <!--   awesome 矢量字体图       -->
           <span class="fa fa-id-card"></span>


       </div>
   </div>
</div>
</body>
<script src="bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</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="row">
       <div class="col-md-12">
           <!--默认样式的进度条-->
           <div class="progress">
               <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                    style="width: 60%;">
                   <span class="sr-only">60% Complete</span>
               </div>
           </div>
       </div>
       <div class="col-md-12">
           <!--           带有提示标签的进度条-->
           <!--将设置了 .sr-only 类的 <span> 标签从进度条组件中移除 类,从而让当前进度显示出来。-->
           <div class="progress">
               <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                    style="width: 60%;">
                  60%
               </div>
           </div>
       </div>
       <div class="col-md-12">
           <!--           在展示很低的百分比时,如果需要让文本提示能够清晰可见,可以为进度条设置 min-width 属性。-->
           <div class="progress">
               <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                    style="min-width: 2em;">
                  0%
               </div>
           </div>
           <div class="progress">
               <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
                    style="min-width: 2em; width: 2%;">
                  2%
               </div>
           </div>
       </div>
       <div class="col-md-12">
           <div class="progress">
               <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                    style="min-width: 2em;">
                  0%
               </div>
           </div>
           <div class="progress">
               <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
                    style="min-width: 2em; width: 2%;">
                  2%
               </div>
           </div>

           <!--           根据情境变化效果-->
           <!--           进度条组件使用与按钮和警告框相同的类,根据不同情境展现相应的效果。-->
           <div class="progress">
               <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0"
                    aria-valuemax="100" style="width: 40%">
                   <span class="sr-only">40% Complete (success)</span>
               </div>
           </div>
           <div class="progress">
               <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                    aria-valuemax="100" style="width: 20%">
                   <span class="sr-only">20% Complete</span>
               </div>
           </div>
           <div class="progress">
               <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                    aria-valuemax="100" style="width: 60%">
                   <span class="sr-only">60% Complete (warning)</span>
               </div>
           </div>
           <div class="progress">
               <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0"
                    aria-valuemax="100" style="width: 80%">
                   <span class="sr-only">80% Complete (danger)</span>
               </div>
           </div>
       </div>
       <div class="col-md-12">
           <!--           条纹效果:-->
           <div class="progress">
               <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                    aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                   <span class="sr-only">40% Complete (success)</span>
               </div>
           </div>
           <div class="progress">
               <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20"
                    aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                   <span class="sr-only">20% Complete</span>
               </div>
           </div>
           <div class="progress">
               <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                   <span class="sr-only">60% Complete (warning)</span>
               </div>
           </div>
           <div class="progress">
               <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80"
                    aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                   <span class="sr-only">80% Complete (danger)</span>
               </div>
           </div>
       </div>
       <div class="col-md-12">
           <!-- 动画效果 :.progress-bar-striped 添加 .active 类-->
           <div class="progress">
               <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
                    aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                   <span class="sr-only">45% Complete</span>
               </div>
           </div>
       </div>
       <div class="col-md-12">
           <!--堆叠效果: .progress 中-->
           <div class="progress">
               <div class="progress-bar progress-bar-success" style="width: 35%">
                   <span class="sr-only">35% Complete (success)</span>
               </div>
               <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
                   <span class="sr-only">20% Complete (warning)</span>
               </div>
               <div class="progress-bar progress-bar-danger" style="width: 10%">
                   <span class="sr-only">10% Complete (danger)</span>
               </div>
           </div>

       </div>
   </div>
</div>
</body>
<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</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">
   <style>
       .col-md-12 {
           margin-top: 100px;
      }
   </style>
</head>
<body>
<div class="container">
   <div class="row">
       <div class="col-md-12">
           <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
                   data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
              Popover on 左侧
           </button>

           <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
                   data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
              Popover on 顶部
           </button>

           <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
                   data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
              Popover on 底部
           </button>

           <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
                   data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
              Popover on 右侧
           </button>
       </div>
       <div class="col-md-12">
           <div style="padding:100px">

               <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="hover"
                  title="Dismissible popover"
                  data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>

               <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left"
                       title="Tooltip on left" data-trigger="click">Tooltip on left
               </button>

               <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top"
                       title="Tooltip on top">Tooltip on top
               </button>

               <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                       title="Tooltip on bottom">Tooltip on bottom
               </button>

               <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"
                       title="Tooltip on right">Tooltip on right
               </button>
           </div>
       </div>
   </div>
</div>
</body>
<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
   $(function () {
       $('[data-toggle="popover"]').popover()
       $('[data-toggle="tooltip"]').popover()
  })
</script>
</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="row">
       <div class="col-md-12">
           <div>

               <!-- Nav tabs -->
               <ul class="nav nav-tabs" role="tablist">
                   <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                             data-toggle="tab">Home</a></li>
                   <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
                   </li>
                   <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
                   </li>
                   <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
                   </li>
               </ul>

               <!-- Tab panes -->
               <div class="tab-content">
                   <div role="tabpanel" class="tab-pane active" id="home">111</div>
                   <div role="tabpanel" class="tab-pane " id="profile">222</div>
                   <div role="tabpanel" class="tab-pane" id="messages">333</div>
                   <div role="tabpanel" class="tab-pane" id="settings">444</div>
               </div>

           </div>
       </div>
   </div>
</div>
</body>
<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
   $('#myTabs a').click(function (e) {
       e.preventDefault()
       $(this).tab('show')
  })
</script>
</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="row">
        <div class="col-md-12">
            <form>
                <div class="form-group  has-feedback">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                    <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>

                </div>
                <div class="form-group  has-feedback">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>
                </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>
</div>
</body>
<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
    $(function () {
        var flag = false

        $('#exampleInputEmail1').blur(function () {
            var val = $(this).val()
            var res = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(val)
            if (res) {
                //校验成功
                $(this).parent().removeClass('has-error')
                $(this).next().removeClass('glyphicon-remove')
                $(this).parent().addClass('has-success')
                $(this).next().addClass('glyphicon-ok')
                flag = true
            } else {
                //校验失败
                $(this).parent().removeClass('has-success')
                $(this).next().removeClass('glyphicon-ok')
                $(this).parent().addClass('has-error')
                $(this).next().addClass('glyphicon-remove')
            }
        }).focus(function () {
            $(this).triggerHandler('blur')
        }).keyup(function () {
            $(this).triggerHandler('blur')
        });

        $(':submit').click(function () {
            if (flag) {
                alert('登录成功')
                return true
            } else {
                alert('登录失败')
            }
            return false
        })
    })
</script>
</html>

 

posted on 2020-03-02 11:48  向往1  阅读(115)  评论(0编辑  收藏  举报

导航

……