三万长文看懂bootsrap是什么,bootsrap有啥用

已于 2023-04-04 20:51:41 修改
阅读量485 收藏 4
点赞数 1
文章标签： jquery 前端 javascript
于 2023-04-04 20:41:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61307468/article/details/129921171
版权

目录

1介绍bootstrap

1.1如何进去bootsrap​​​

1.2bootstrap作用

2.bootstrap全局的CSS样式

 2.1 bootstrap模板

 2.2容器

 2.3栅格系统

2.3.1栅格系统作用

2.3.2代码示范

2.3.3补充栅格系统参数补充

 2.4排版

2.4.1内联文本标签

2.4.2对齐方式

2.4.3代码示范

 2.5表格

2.5.1表格属性

 2.6表单

 2.6.1示例代码;

 2.6.2示例代码

2.7按钮

2.7.1按钮情景属性值

2.7.2按钮尺寸属性值

2.7.3代码示例

2.8图片

2.8.1图片属性值

2.8.2示列代码

 2.9辅助

2.9.1辅助属性-文字颜色

2.9.2辅助属性-背景颜色

2.9.3辅助属性-浮动

 3.bootstrap组件的使用

3.1框和图标组件的使用

3.2导航条组件

4.bootstrap插件的使用

1介绍bootstrap

一个前端 UI 框架，由 twitter 公司开发，2013 年 7 月发布 1.0 版本

1.1如何进去bootsrap​​​

首先我们进入Bootstrap中文网,点击V3中文文档,选择JavaScript插件.我们这里主要介绍的是V3的文档.

JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。https://v3.bootcss.com/javascript/

1.2bootstrap作用

快速开发响应式网页, 在现实中工作中,我们主要用于仿站,快速模仿出一个差不多的网站

2.bootstrap全局的CSS样式

 2.1 bootstrap模板

这里是重点是引入外链文件

link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h1>你好，世界！</h1>
    <hr>
    <div class="col-xs-3">
      <input type="text" class="form-control">
    </div>
    <button class="btn btn-primary">点击登录</button>
  </div>
</body>

 2.2容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。下面分为两种容器

  1. container-fluid   100%填满容器

  2. container           响应式容器

    <title>容器</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    div{
      background: #abc;
      height: 100px;
    }
  </style>
</head>
<body>
  <!-- 100% 容器 -->
  <div class="container-fluid">

  </div>
  <hr>
  <!-- 响应式容器 -->
  <div class="container"></div>
</body>
</html>

    2.3栅格系统

提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局https://v3.bootcss.com/css/#grid-less

2.3.1栅格系统作用

作用1:将元素的宽度 12 等分 .

作用2:将屏幕大小定义 4 种尺寸

  • xs （extra small） 屏幕尺寸 < 768px

  • sm （small） 屏幕尺寸 >= 768px

  • md （middle） 屏幕尺寸 >= 992px

  • lg （large） 屏幕尺寸 >= 1200px

作用3:列偏移

作用4:列嵌套

2.3.2代码示范

<title>栅格系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    div[class*=col-xs]{
      height: 50px;
      border: solid 1px #258;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>12 份</h2>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>

    <h2>屏幕划分</h2>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2"></div>

    <h2>列偏移</h2>
    <div class="col-xs-4 col-xs-offset-4"></div>

    <div class="clearfix"></div>
    <h2>列嵌套</h2>
    <div class="col-xs-6">
      <div class="col-xs-4 col-xs-offset-4 col-lg-10"></div>
    </div>
  </div>
</body>

2.3.2运行 

 2.3.3补充栅格系统参数补充

 2.4排版

2.4.1内联文本标签

  • s 中横线

  • u 下划线

  • b 加粗

  • i 斜体

2.4.2对齐方式

  • text-left 左对齐

  • text-center 居中对齐

  • text-right 向右对齐

2.4.3代码示范

 <title>Document</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">



</head>



<body>

  <div class="container">

    <!-- 文本排版 -->

    <h2>排版</h2>



    <p>You can use the mark tag to <mark>highlight</mark> text.</p>



    <p>今天是<mark>星期六</mark>, 明天休息</p>

    <!-- 特殊文本运用 -->

    <!-- s删除线 ; u下划线 -->

    <p>不要 <s>998</s>, 不要 <s>888</s>, 只要 <b>198</b>, <u>电饭煲</u>让你<i>抱回家</i></p>



    <h2>文本对齐</h2>

    <p>我们是独立的个体，却不是孤独的存在</p>

    <!-- 文本居中对齐 -->

    <p class="text-center">我们是独立的个体，却不是孤独的存在</p>

    <!-- 文本向右 -->

    <p class="text-right">我们是独立的个体，却不是孤独的存在</p>



    <!-- pre插入代码框 -->

    <h2>代码</h2>

    <p>你可以使用 <code>console.log(x)</code> 尝试去输出 x 变量, 你可以使用 <kbd>ctrl + shift + i</kbd> 打开浏览器控制台</p>

    <pre>

var a = 100;

var b = 200;

var c = a + b;

</pre>

  </div>

</body>



</html>

运行  

 2.5表格

2.5.1表格属性

  • table-striped 隔行换色

  • table-bordered 边框

  • table-hover 悬浮换色

  • table-condensed 紧凑型

  • table-responsive 响应式表格

这边示例了快速生成四个表格

<title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h2>表格</h2>

    <div class="col-xs-6 col-xs-offset-3">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="col-xs-6 col-xs-offset-3">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="col-xs-6 col-xs-offset-3">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="col-xs-6 col-xs-offset-3">
      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr class="danger">
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

 2.6表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

 2.6.1示例代码;

 <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .h-20 {
      height: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="col-xs-6 col-xs-offset-3">
      <h2 class="page-header">登录</h2>
      <form>
        <div class="form-group">
          <label for="exampleInputEmail1">邮箱</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">密码</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的密码">
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox"> 7 天免登录
          </label>
        </div>
        <hr>
        <button type="submit" class="btn btn-primary btn-block">登录</button>
      </form>
    </div>
  </div>
  <div class="h-20"></div>
  <div class="container">
    <div class="col-xs-8 col-xs-offset-2">
      <form class="form-inline">
        <div class="form-group">
          <label for="exampleInputName2">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default">Send invitation</button>
      </form>
    </div>
  </div>

  <div class="h-20"></div>
  <div class="container">
    <div class="col-xs-6 col-xs-offset-3">
      <form class="form-horizontal">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label>
                <input type="checkbox"> Remember me
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

运行图片

 2.6.2示例代码

<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>

2.6.2运行图片

2.7按钮

为按钮添加不同的颜色只是一种视觉上的信息表达方式.

2.7.1按钮情景属性值

  • btn-primary 首选

  • btn-success 成功

  • btn-warning 警告

  • btn-danger 错误 / 危险

  • btn-info 提醒

2.7.2按钮尺寸属性值

  • btn-lg 超大

  • btn-md 中等

  • btn-sm 小型

  • btn-xs 超小型

2.7.3代码示例

<title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h2 class="page-header">按钮</h2>

    <button>我是一个小按钮</button>
    <button class="btn">按钮</button>
    <button class="btn btn-default">按钮</button>
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-success">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-danger">按钮</button>
    <hr>
    <!-- 大按钮 -->
    <button class="btn btn-primary btn-lg">按钮</button>
    <!-- 中按钮 -->
    <button class="btn btn-primary btn-md">按钮</button>
    <!-- 小按钮 -->
    <button class="btn btn-primary btn-sm">按钮</button>
    <!-- 特小按钮 -->
    <button class="btn btn-primary btn-xs">按钮</button>

  </div>
</body>

</html>

运行截图

2.8图片

2.8.1图片属性值

  • img-responsive 响应式显示

  • img-circle 圆形显示

  • img-rounded 圆角显示

  • img-thumbnail 缩略图形式显示

2.8.2示列代码

 <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/holder/2.9.8/holder.js"></script>
</head>
<body>
  <!-- container 最大宽度,自适应伸缩容器,随屏幕而自动调节 -->
  <div class="container">
    <h2>图片</h2>
    
    <img src="holder.js/300x200" alt="">
    <img src="https://picsum.photos/300/200?image=2" alt="">

    <hr>
    <!--  col-xs超小屏幕,一般指的是手机屏幕-->
    <div class="col-xs-3">
      <!-- 响应式显示 -->
      <img class="img-responsive" src="https://picsum.photos/500/400?image=20" alt="">
    </div>
    <div class="col-xs-3">
      <!-- 原形显示 -->
      <img class="img-circle" src="holder.js/200x200?bg=#a58&text=hello" alt="">
    </div>
    <div class="col-xs-3">
      <!-- 圆角显示 -->
      <img class="img-rounded" src="holder.js/200x200?bg=#258&text=圆角" alt="">
    </div>
    <div class="col-xs-3">
      <!-- 缩略图显示 -->
      <img class="img-thumbnail" src="holder.js/200x200?bg=#258&text=圆角" alt="">
    </div>
  </div>
</body>

运行截图

 2.9辅助

2.9.1辅助属性-文字颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。

  • text-primary

  • text-info

2.9.2辅助属性-背景颜色

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。

  • bg-primary

  • bg-info

2.9.3辅助属性-浮动

  • pull-left 向左浮动

  • pull-right 向右浮动

  • center-block  块居中

  • clearfix  清除浮动

2.9.4代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>辅助类</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    p[class*=bg-]{
      padding: 10px;
    }
    div[class*=col-xs]{
      border:solid 1px #666;
      height: 50px;
    }
    body{
      height: 2000px;
    }
    .box{
      width: 200px;
      height: 50px;
      background: #852;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>辅助类</h2>
    <hr>
    <!-- 文本显示蓝色 -->
    <p class="text-primary">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
    <p class="text-success">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
    <p class="text-info">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
    <!-- 文本显示红色 -->
    <p class="text-danger">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
    <!-- 文本显示黄色 -->
    <p class="text-warning">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
    <!-- 文本显示灰色 -->
    <p class="text-muted">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
    <!-- 无样式添加的黑色 -->
    <p>资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
  
    <!-- 文本框加背景色 -->
    <p class="bg-primary">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
    <p class="bg-success">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
    <p class="bg-info">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
    <p class="bg-danger">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>
    <p class="bg-warning">资本来到世间，从头到脚每个毛孔都滴着血和肮脏的东西</p>


    <h2>浮动效果</h2>
    <!-- 右浮动 -->
    <div class="col-xs-3 pull-right"></div>
    <!-- 清除浮动 -->
    <div class="clearfix"></div>
    <!-- 左浮动 -->
    <div class="col-xs-3 pull-left"></div>
    <div class="clearfix"></div>
    <!-- 盒子居中 -->
    <div class="box center-block"></div>

  </div>
</body>
</html>

运行截图

 3.bootstrap组件的使用

3.1框和图标组件的使用

这里选了一部分的组件作为练习看效果

3.1.2代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 图标组件样式设置*/
    .glyphicon {
      font-size: 24px;
      color: #a58;
    }
  </style>
</head>

<body>
  <div class="container">
    <span class="glyphicon glyphicon-bitcoin" aria-hidden="true"></span>
  </div>

  <div class="container">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <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>
    </div>
  </div>

  <div class="container">
    <div class="btn-group" role="group" aria-label="...">
      <!-- 插入选框 -->
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
  <!-- 按钮组件btn-group -->
      <div class="btn-group" role="group">
        <!-- 右对齐.dropdown-menu-right  -->
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <!-- 对齐组件dropdown-menu -->
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>
    <div class="container">
      <div class="col-lg-4 col-lg-offset-8">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for...">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
        </div><!-- /input-group -->
      </div>
    </div>
    <hr>
    <div class="container">
      <div class="col-lg-6">
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">Action <span class="caret"></span></button>
            <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>
          </div><!-- /btn-group -->
          <input type="text" class="form-control" aria-label="Text input with dropdown button">
        </div><!-- /input-group -->
      </div>
    </div>
    <hr>  
    <div class="container">
      <div class="col-xs-6 col-xs-offset-3">
        <ul class="nav nav-pills nav-justified">
          <li role="presentation" class="active"><a href="#">Home</a></li>
          <li role="presentation"><a href="#">Profile</a></li>
          <li role="presentation"><a href="#">Messages</a></li>
        </ul>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>

</html>

3.2导航条组件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body{
      height: 2000px;
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
    <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="#">LOGO</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>
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>

</html>

运行截图

4.bootstrap插件的使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body style="height: 2000px;">
  <div class="container">
    <h2 class="page-header">模态框</h2>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-danger btn-md" data-toggle="modal" data-target="#myModal">
      删除
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
          </div>
          <div class="modal-body">
            您确定要删除当前信息么?
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">确认</button>
          </div>
        </div>
      </div>
    </div>

    <h2 class="page-header">标签页</h2>
    <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
      <ul id="myTabs" class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab"
            aria-controls="home" aria-expanded="true">Home</a></li>
        <li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab"
            aria-controls="profile" aria-expanded="false">Profile</a></li>
      </ul>
      <div id="myTabContent" class="tab-content">
        <div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="home-tab">
          <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
            synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher
            retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip
            placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
          <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1
            labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer
            twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl
            cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
            salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
            sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester
            stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
        </div>
      </div>
    </div>

    <h2 class="page-header">提示</h2>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left"
      title="Tooltip on left">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</button>

    <h2 class="page-header">提示</h2>
    <div class="alert alert-warning alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">×</span></button>
      <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
    </div>
    <div class="alert alert-success alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">×</span></button>
      恭喜! 下单成功
    </div>
    <div class="alert alert-info alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">×</span></button>
      恭喜! 下单成功
    </div>
    <div class="alert alert-danger alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">×</span></button>
      恭喜! 下单成功
    </div>

    <h2 class="page-header">手风琴</h2>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
              aria-controls="collapseOne">
              商品管理
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            我是展开后的内容
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
              aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
            officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
            wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
            excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
            you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
              aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
            officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
            wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
            excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
            you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
    </div>

    <h2 class="page-header">轮播图</h2>
    <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="holder.js/100px200?bg=#89c" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="holder.js/100px200?bg=#a56" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="holder.js/100px200?bg=#257" 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>
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/holder/2.9.8/holder.js"></script>
  <script>
    // $ 是 jquery 内部的一个变量
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    });
  </script>
</body>

</html>

运行图片

今天也在码前端–霖
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VxWorks启动解析
Periscope的专栏
09-21 1596
一，启动顺序的一些概念上电启动Vxworks image发生事件的顺序处理器跳到ROM或Flash中的Boot-strap程序的起点，主要作用    关闭中断（来自CPU内部）    初始化目标内存    装载要运行的VxWorks Iamge segment    Jumps to code to place target in quiet state    启动顺序----Loadable V
万字长文：一文看懂GPT风口，有哪些创业机会？
04-08
这篇万字长文将深入探讨GPT技术及其带来的创业机遇。 首先，我们需要理解GPT的核心原理。GPT是通过大规模的预训练模型学习语言模式，然后在特定任务上进行微调以达到优秀性能。它采用Transformer架构，这种架构在...
Bootrap学习笔记——不定期更新
07-15 130
在IE浏览器中运行最新渲染模式 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 初始化移动端设备浏览显示 <meta name="viewport" content="width=device-width,initial-scale=1"> 使IE8支持Ht...
bootsrap笔记
radation的博客
03-05 232
详细内容参考http://www.imooc.com/learn/141 1.bootstrap响应式实现的原理 媒体查询，根据屏幕大小适用不同的屏幕宽度，百分比布局。 2.下拉菜单创建方法（示例） <div class="dropdown"> //添加"dropup"类就是上拉菜单 <button class="btn btn-default dropdown-toggle...
bootrap入门【embed and well】
章鱼小丸子
03-01 907
look in a well
Bootstrap入门
枫叶
02-22 3万+
1、什么是Bootrap2、为什么要学习Bootstrap3、哪些项目在使用Bootstrap4、安装和使用5、简单阅读Bootstrap源码6、Bootstrap全局CSS样式7、Bootstrap组件8、Bootstrap插件（了解）9、Bootstrap定制10、Bootstrap学习意义总结1、什么是BootstrapBootstrap来自 Twitter，是目前很受欢迎的前端框架。Boo...
产品需求-深度长文(一)什么是产品架构.pdf
12-17
产品架构与技术架构有共通之处，它同样需要对业务有深入理解，不能脱离实际。产品架构师的角色就是将业务需求转化为具体的产品设计，包括功能模块、流程和交互，确保产品能够满足用户需求并适应不断变化的业务环境。...
产品需求-深度长文(一)什么是产品架构.docx
12-17
- **可维护性**：清晰的架构有助于代码管理和故障排查，降低维护成本。 - **用户体验**：架构设计也影响到用户界面的布局和交互流程，直接影响用户对产品的感知和满意度。 3. 产品架构的类型： - **分层架构**：...
三万长文50+趣图带你领悟web编程的内功心法：一文带你深入解读HTTP的发展史（csdn）————程序.pdf
12-04
三万长文50+趣图带你领悟web编程的内功心法：一文带你深入解读HTTP的发展史（csdn）————程序
2022年前端Vue常见面试题大全（三万长文）持续更新...-vue面试题.zip
02-05
2022年前端Vue常见面试题大全（三万长文）持续更新 目录 1.Vue和React有什么不同？使用场景分别是什么？ 2.axios是什么？怎么使用它，怎么解决跨域？ 3.说说Vue，React，angularjs，jquery的区别 4.什么阶段...
前端插件 大部分是bootstrapmb上含泪付费下载的
05-26
前端的一些付费插件 含泪下的（血亏！） 大部分是js的
Bootstrap踩坑笔记（记录Bootstrap当中的核心知识点）
m0_68997646的博客
01-18 753
Bootstrap踩坑笔记（记录Bootstrap当中的核心知识点）
Bootstrap基础
weixin_30565327的博客
01-04 135
1、什么是BootstrapBootstrap来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语...
统计学中的Bootstrap方法介绍及其应用
热门推荐
芳樽里的歌的博客
01-25 7万+
简要介绍了统计学中的Bootstrap方法及其在时间序列相关检验中的应用。
可用的bootrap摸态框样式
wangc_gogo的博客
03-05 327
<div class="fixed-table-toolbar"> <!-- 按钮触发模态框 --> <div class="columns columns-right btn-group pull-right"> <button type="button" class="btn btn-primary" data-tog...
bootsrap中的栅格系统
黄钢的博客
06-09 1万+
官网解释了栅格的多种布局方式，但是不够明确
WebSocket使用教程 - 带完整实例
HuYong
07-24 1万+
什么是WebSocket？看过html5的同学都知道，WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信(full-duplex)。HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。现在我们来探讨一下html5的WebSocket 概念 HTML5作为下一代WEB标准，拥有许多引人注目的新特性，如Canvas、本地...
Bootstrap的安装和使用
Mr.Write的博客
05-10 5万+
Bootstrap的安装和使用一. Bootstrap简介Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。具体Bootstrap的学习教程可参考菜鸟教程二.
c++ linuxwebserver 2万7千字的面经长文(下)
最新发布
09-17
对于c linuxwebserver这篇2万7千字的面经长文，我只能够给出一个简短的回答，因为回答这个问题所需要的字数不足以完整概括面经中的内容。 根据题目所述，这篇长文关于c linuxwebserver，可能涵盖了相关的主题和技术，包括C语言、Linux和Web服务器等。 C语言是一种广泛使用的编程语言，常用于系统软件和应用程序的开发。它具有高效、灵活和可移植的特性，广泛应用于各种领域。 Linux是一种开源的操作系统内核，它的特点是稳定、安全和可靠。在Linux环境下进行C语言开发，可以利用Linux的各种功能和库来实现各种任务，如网络编程、文件管理和进程控制等。 Web服务器是一种用于存储、处理和传输Web页面和资源的软件。它可以使用C语言和Linux开发，并提供一系列功能，如HTTP协议解析、请求处理和响应生成等。 面经长文可能涉及到C语言在Linux环境下开发Web服务器的相关知识和经验，包括如何使用Socket编程进行网络编程、如何处理HTTP请求和生成HTTP响应、如何实现高并发和负载均衡等。 总之，这篇2万7千字的长文可能对C语言、Linux环境和Web服务器开发方面的知识进行了深入的阐述和讨论。在回答这个问题时，我只能简单地概括了这篇长文可能涉及的主题和技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值