五、Bootstrap

最新推荐文章于 2024-01-09 11:16:13 发布
最新推荐文章于 2024-01-09 11:16:13 发布
阅读量810 收藏 5
点赞数
分类专栏： 开源框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39083770/article/details/114525649
版权

Bootstrap

  • 用于开发响应式布局、移动设备优先的Web项目

  • 响应式布局

    • 响应式网页主要是指网站的页面可以根据不用用户浏览设备的大小，动态进行相应的布局展示，保证用户的体验。基于响应式的思想，可以开发一套网页，在不同的设备上使用，同时还可以在保证用户体验的前提下节省开发的成本

    • 响应式网页中的核心技术

      • 通过媒体查询实现

        <!--通过在link标签中使用media属性，检测不同的浏览设备，添加对应的样式-->
<!--引入外部的css样式表文件-->
<link media="screen and (min-width:992px)" href="css/pc.css" rel="stylesheet" type="text/css"/>
<link media="screen and (max-width:991px) and (min-width:768px)" href="css/pad.css" rel="stylesheet" type="text/css"/>
<link media="screen and (max-width:767px)" href="css/mobile.css" rel="stylesheet" type="text/css"/>

      • 通过@media标签，改变局部的样式，做局部控制

        <style type="text/css">
        针对局部样式
        @media screen and (min-width: 992px) {
            div {
                border: solid 1px pink;
            }
        }
        @media screen and (max-width:991px) and (min-width:768px) {
            div{
                border:solid 1px deeppink;
            }
        }
        @media screen and (max-width:767px) {
            div{
                border:solid 1px yellow;
            }
        }
</style>

  • Bootstrap框架简介

    • 是目前最受欢迎的一种前段框架技术，通过使用bootstrap可以在书写少量的css代码的前提下，快速构建和实现一套网站的网页系统。bootstrap对响应式网页开发提供了非常好的支持
    • 下载：https://bootcss.com

  • Bootstrap环境搭建

    • 引入相关的功能文件

    • 构建一个Bootstrap的开发环境模版：官网获取

      <!--指定当前html版本是H5-->
<!DOCTYPE html>
<!--lang="zh-CN"  中文，指定网页的原始语言，给屏幕阅读器指定一个语言的发音-->
<html lang="zh-CN">
<head>
    <!-- H5网页标准编码格式-->
    <meta charset="utf-8">
    <!-- X-UA-Compatible  cross-user agent跨用户代理，即跨浏览器的兼容性，主要针对IE-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport设置理想化的视口，width=device-width与设备大小一样，initial-scale缩放比例1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap全局样式

  • Bootstrap默认对html的一些基本样式做了重新初始化修改

    • 字体大小默认为14px
    • 行高1.428
    • 取消了浏览器边框的间隙
    • 缩小了段落标签的间隙等等

  • 栅格布局系统

    • 关于布局方式

      • 使用table布局：结构复杂，页面可读性差，加载速度慢
      • 使用div布局：难以精确的控制，对css技术要求很高

    • 栅格布局是通过div元素，基于表格的思想进行布局，默认栅格布局时会将网页布局的区域横向分成12份

    • 布局容器

      • 布局时外面必须有一个容器container / container-fluid
      • 列必须写在row中，内容必须写在列中
      • 内容必须写在col列中，列(col--)必须在row行内

    • 如果当前行布局的列超过了12列，多出来的会在下一行显示

      • 如果没有指定在对应浏览设备下的布局，则所以div单独占一行显示
      <!--两个布局容器-->
<div class="container">
    <h1>你好，世界！container容器</h1>
</div>
<div class="container-fluid">
    <h1>HelloWorld ！！！container-fluid容器</h1>
</div>

<div class="container-fluid">
    <div class="row">
        <!-- 三个参数分别对应不同尺寸的屏幕时，一个div占多少列，通常高度使用默认 -->
        <div class="col-md-2 col-sm-4 col-xs-6" style="border: solid 1px hotpink">1</div>
        <div class="col-md-2 col-sm-4 col-xs-6" style="border: solid 1px hotpink">2</div>
        <div class="col-md-2 col-sm-4 col-xs-6" style="border: solid 1px hotpink">3</div>
        <div class="col-md-2 col-sm-4 col-xs-6" style="border: solid 1px hotpink">4</div>
        <div class="col-md-2 col-sm-4 col-xs-6" style="border: solid 1px hotpink">5</div>
        <div class="col-md-2 col-sm-4 col-xs-6" style="border: solid 1px hotpink">6</div>
    </div>
    ```

    • 列的响应式设置：如果没有设置指定尺寸屏幕下的布局方式，div会堆叠显示(每一个div占一行)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rkff6RvB-1615172670665)(/Users/hang/百知培训班/第三阶段预习笔记/栅格参数.png)]

    • 通过设置列的偏移，指定区域在当前行的位置：col-md-offset-n，n代表向右偏移的列的数量(默认以12份为坐标)

      <div class="row">
        <!-- 代表md屏幕向右偏移四列 -->
        <div class="col-md-4 col-md-offset-4" style="border: solid 1px hotpink">
            <img src="img/1.gif" width="100%">
        </div>
    ```

    • 嵌套布局

      <div class="row">
       <div class="col-md-4 col-md-offset-4" style="border: solid 1px hotpink">
            <div class="row">
                <div class="col-md-4" style="border: solid 1px red">1</div>
                <div class="col-md-4" style="border: solid 1px red">2</div>
                <div class="col-md-4" style="border: solid 1px red">3</div>
            </div>
       </div>
    ```

    • 列排序

      <div class="row">
        <!-- col-md-push-3 左侧空三个-->
        <div class="col-md-9 col-md-push-3" style="border: solid 1px hotpink">
            col-md-9 col-md-push-3
        </div>
        <!-- 右侧空九个宽度，需要两个同时使用 -->
        <div class="col-md-3 col-md-pull-9" style="border: solid 1px hotpink">
            col-md-3 col-md-pull-9
        </div>
    ```

    • 常用排版

      <body>
<h1>你好，世界！</h1>
<h2>你好，世界！</h2>
<h3>你好，世界！</h3>
<h4>你好，世界！</h4>
<h5>你好，世界！</h5>
<h6>你好，世界！</h6>
<p class="lead">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi beatae commodi consectetur consequuntur
</p>
<mark>你好，世界</mark>
<u>你好，世界</u>
<small>你好，世界</small>
<del>原价：2000</del> | 现价：200
<h3>对齐</h3>
<!--text-justify两端对齐，left左对齐，right右对齐，center居中-->
<p class="text-justify">
    愿无岁月可回头，一切静好似汝意
    沿着善良总会闻到花香
</p>
<!--全大小-->
<p class="text-uppercase">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet, asperiores beatae deserunt,
</p>
<!--全小写-->
<p class="text-lowercase">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi dolor dolorem, ipsum maiores officia
</p>
<!--首字母大写-->
<p class="text-capitalize">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolorum illum, iste libero sunt vero? 
</p>
<!--设置字体的样式-->
<p class="text-success">
        柳暗花明又一村
</p>
<p class="text-info">
        柳暗花明又一村
</p>
<p class="text-danger">
        柳暗花明又一村
</p>
<p class="text-primary">
        柳暗花明又一村
</p>
<!--取消无序标记符号-->
<ul class="list-unstyled">	
    <li><a href="">人之初，性本善</a></li>
    <li><a href="">人之初，性本善</a></li>
    <li><a href="">人之初，性本善</a></li>
</ul>
<!--横着的-->
<ul class="list-inline">
    <li><a href="">首页</a></li>
    <li><a href="">关于我们</a></li>
    <li><a href="">企业文化</a></li>
</ul>

    请输入cd+进行更换目录位置
    ```

    • 表格

      • 带边框的表格：

      • 斑马线效果表格：

      • 带鼠标悬停效果表格：

      • 响应式表格：

        <div class="table-responsive">
    <table class=""></table>
      ```

      • 紧缩式表格：

      • 演示

        <h2>默认基础表格样式</h2>
    <table class="table">
        <thead>
        <tr class="active">
            <th>编号</th>
            <th>名称</th>
            <th>产地</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <tr class="success">
            <td>1</td>
            <td>苹果</td>
            <td>山东</td>
            <td>10.0</td>
        </tr>
        </tbody>
    </table>
    <h2>带边框的表格</h2>
    <table class="table table-bordered">
        <thead>
        <tr class="info">
            <th>编号</th>
            <th>名称</th>
            <th>产地</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <tr class="danger">
            <td>1</td>
            <td>苹果</td>
            <td>山东</td>
            <td>10.0</td>
        </tr>
        </tbody>
    </table>
    <h2>条纹状表格table-striped、鼠标移入效果table-hover</h2>
    <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>产地</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>苹果</td>
            <td>山东</td>
            <td>10.0</td>
        </tr>
        </tbody>
    </table>
    <h2>带边框的表格+紧缩展示</h2>
    <table class="table table-bordered table-condensed">
        <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>产地</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>苹果</td>
            <td>山东</td>
            <td>10.0</td>
        </tr>
        </tbody>
    </table>
    <h2>响应式表格</h2>
    <div class="table-responsive">
        <table class="table table-bordered table-condensed">
            <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>产地</th>
                <th>价格</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>苹果</td>
                <td>山东</td>
                <td>10.0</td>
            </tr>
            </tbody>
        </table>
      ```

      • 按钮

        <div class="container">
    <a href="" class="btn btn-default">点击一下</a>
    <button type="button" class="btn btn-danger">点击一下</button>
    <input type="button" class="btn btn-info" value="提交">
    <hr>
    <button type="button" class="btn btn-success">按钮</button>
    <button type="button" class="btn btn-primary">按钮</button>
    <button type="button" class="btn btn-warning">按钮</button>
    <hr>
    <!-- active激活   disabled禁止  btn-lg按钮大小-->
    <button type="button" class="btn btn-success active">按钮</button>
    <button type="button" class="btn btn-success">按钮</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">按钮</button>
    <button type="button" class="btn btn-warning btn-sm">按钮</button>
    <button type="button" class="btn btn-warning btn-xs">按钮</button>
      ```

      • 图片

        <div class="container">
<!-- 图片特效 img-circle圆形图片-->
    <div class="row">
        <div class="col-md-3">
            <img class="img-circle" src="img/1.gif" alt="" width="100%">
        </div>
        <div class="col-md-3">
            <img class="img-circle" src="img/4.gif" alt="" width="100%">
        </div>
    </div>
<!-- 图片特效 img-rounded圆角图片-->
    <div class="row">
        <div class="col-md-3">
            <img class="img-rounded" src="img/1.gif" alt="" width="100%">
        </div>
        <div class="col-md-3">
            <img class="img-rounded" src="img/4.gif" alt="" width="100%">
        </div>
    </div>
<!-- 图片特效 img-thumbnail窄相框图片-->
    <div class="row">
        <div class="col-md-3">
            <img class="img-thumbnail" src="img/1.gif" alt="" width="100%">
        </div>
        <div class="col-md-3">
            <img class="img-thumbnail" src="img/4.gif" alt="" width="100%">
        </div>
    </div>
<!--  响应式图片-->
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-3">
            <img class="img-thumbnail" src="img/1.gif" alt="" width="100%">
        </div>
        <div class="col-md-3 col-sm-3 col-xs-3">
            <img class="img-thumbnail" src="img/4.gif" alt="" width="100%">
    </div>
</div>
表单样式

  • 基础表单

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="">
                <div class="form-group">
                    <!--  点击文本会根据for找对应id的文本框-->
                    <label for="username">username:</label>
                    <input class="form-control" type="text" name="username" id="username" >
                </div>
                <div class="form-group">
                    <label for="password">password:</label>
                    <input class="form-control" type="password" name="password" id="password" >
                </div>
                hobby:
                <div class="checkbox">
                	<!-- 换行 -->
                    <label>
                        <input type="checkbox">吃饭
                    </label>
                </div>
                <!-- 不换行 -->
                <label class="checkbox-inline">
                    <input type="checkbox">睡觉
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox">打豆豆
                </label>
                <br>
                <input class="btn btn-success" style="width: 100%" type="submit" value="提交">
            </form>
        </div>
</div>

  • 行内表单

    <!--form-inline行内-->
<form class="form-inline" action="">
      <div class="form-group">
            <!-- sr-only给盲人使用，屏幕阅读器可以读出placeholder-->
            <label for="username" class="sr-only">username:</label>
            <input class="form-control" type="text" name="username" id="username"
                   placeholder="请求入用户名">
      </div>
</form>

  • 水平排列表单

    <form action="" class="form-horizontal">
       <div class="form-group"><!-- 相当于row，对比栅格布局-->
            <label for="username" class="control-label col-md-3">Username:</label><!-- 相当于col-xxx-->
            <div class="col-md-6">
                <input class="form-control" type="text" name="username" id="username"><!-- 相当于col-xxx-->
            </div>
        </div>
        <div class="form-group"><!-- 相当于row，对比栅格布局-->
            <label for="password" class="control-label col-md-3">Password:</label><!-- 相当于col-xxx-->
            <div class="col-md-6">
                <input class="form-control" type="text" name="password" id="password"><!-- 相当于col-xxx-->
            </div>
        </div>
  
        <!--  个人信息简介输入框-->
        <div class="form-group">
            <!-- div做布局限定大小，第一个参数是大小，第二个是位置-->
            <div class="col-md-6 col-md-offset-3">
                <textarea class="form-control" name="" id="" clos="20" rows="3"></textarea>
            </div>
        </div>
</form>

        <!-- 下拉列表-->
        <select class="form-control" id="xueli">
            <option value="">本科</option>
            <option value="">研究生</option>
            <option value="">博士</option>
        </select>
        <!-- 邮箱 has-success添加框体样式  has-feedback可以在当前框体中有小图标-->
      <div class="form-group has-success has-feedback">
            <div class="col-md-2">
                <label for="email" class="control-label">email:</label>
            </div>
            <div class="col-md-6">
                <!--  disabled禁用 -->
              <input class="form-control" type="email" disabled name="email" id="email">
                <!--  加上小图标 -->
              <span class="glyphicon glyphicon-ok form-control-feedback" ></span>
            </div>
        </div>
      <!-- 邮箱-->
      <div class="form-group">
          <div class="col-md-2">
                <label for="email" class="control-label">email:</label>
            </div>
            <div class="col-md-6">
                <p class="form-control-static">12345@qq.com</p>
            </div>
      </div>

<!-- 此时username标识在最左侧-->
<div class="col-md-3">
       <label for="name" class="control-label">Username:</label><!-- 相当于col-xxx-->
</div>

    • 表单排列浮动会影响下面布局，所以在表单结束后清除一下

      <!-- 清除浮动-->
<span class="clearfix"></span>

    • 字体和背景颜色：bootstrap会作区分，颜色一样时也可以看到字体

      <p class="text-danger bg-danger">123</p>
<p class="text-success bg-success">123</p>
<p class="text-info bg-info">123</p>
<p class="text-warning bg-warning">123</p>

    • 其他辅助样式

      //关闭按钮
<button class="close">&times;</button>
//箭头
<span class="caret"></span>
//浮动
<div class="pull-left">
	<button class="close">&times;</button>	默认在右上角，此时在左上角
</div>
//center-block让div等内容快居中
<div class="center-block">
</div>
//hidden，隐藏，配合script点击事件改成show使用
响应式工具
//class="hidden-sm"，当尺寸为平板时隐藏
//尺寸为平板时显示
<div class="hidden visible-sm">
</div>

    • 字体图标和按钮

      字体图标库，本质还是字
<span class="glyphicon glyphicon-film"></span>
//字体图标做按钮
<button class="btn btn-primary" type="button">
	确定<span class="glyhicon glyphicon-ok"></span>
</button>
//按钮组
//btn-group紧凑
<div class="btn-group">
	<button class="btn btn-info" type="button">
		<span class="glyphicon glyphicon-backward"></span>上一首
	</button>
	<button class="btn btn-info" type="button">
		<span class="glyphicon glyphicon-play"></span>播放
	</button>
	<button class="btn btn-info" type="button">
		<span class="glyphicon glyphicon-forward"></span>前进
	</button>
</div>

    • 下拉菜单

      <div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		爱好<span class="caret"></span>
	</button>
	<ul class="dropdown-menu dropdown-menu-right">	//right向右对齐，默认左对齐
		<li class="dropdown-header"><a href="">吃饭</a></li>	//标题
		<li class="disabled"><a href="">睡觉</a></li>		//不让选中
		<li class="divider"></li>		//下拉列表中的横线
		<li><a href="">打豆豆</a></li>
	</ul>
</div>

把按钮做成下拉菜单，分裂式下拉菜单  div父元素加上dropup为向上弹出
<div class="btn-group dropup">
	<button class="btn btn-primary>爱好</button>
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="fropdown">
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu dropdown-menu-right">	//right向右对齐，默认左对齐
		<li class="dropdown-header"><a href="">吃饭</a></li>	//标题
		<li class="disabled"><a href="">睡觉</a></li>		//不让选中
		<li class="divider"></li>		//下拉列表中的横线
		<li><a href="">打豆豆</a></li>
	</ul>
</div>

    • 标签

      <span class="label label-danger">聪明</span>
<span class="label label-danger">机智</span>
<span class="label label-success">高</span>
<span class="label label-danger">穷</span>

    • 输入框

      <div class="container">
    <form action="">
        <div class="form-group">
            <label for="email">Email</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <input type="checkbox">
                </span>
                <input class="form-control" type="text" id="email">
                <span class="input-group-addon">@alibaba.com</span>
            </div>
        </div>

        <!--可选下拉框配合输入框-->
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-btn">
                    <button class="btn btn-default dropdown" type="button" data-toggle="dropdown">
                        学院<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="">软件</a> </li>
                        <li><a href="">药学</a> </li>
                        <li><a href="">金融</a> </li>
                    </ul>
                </div>
                <input type="text" class="form-control">
            </div>
        </div>
    </form>
</div>

    • 导航栏

      <div class="container">
    <!-- 基本导航栏 -->
    <ul class="nav nav-tabs">
        <li><a href="">百度</a></li>
        <li><a href="">搜狗</a></li>
        <li><a href="">淘宝</a></li>
    </ul>

    <ul class="nav nav-tabs nav-pills">
        <li><a class="btn btn-primary" href="">百度</a></li>
        <li><a href="">搜狗</a></li>
        <li class="dropdown">
            <a href="" class="btn btn-default dropdown" data-toggle="dropdown">
                淘宝<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="">衣服</a></li>
                <li><a href="">食品</a></li>
                <li><a href="">呵呵</a></li>
            </ul>
        </li>
    </ul>
    <!-- 纵向，默认填充整个父容器-->
    <ul class="nav nav-stacked">
        <li><a class="btn btn-primary" href="">百度</a></li>
        <li><a href="">搜狗</a></li>
        <li><a href="">淘宝</a></li>
    </ul>
</div>

响应式导航栏
<!--响应式导航栏   navbar-fixed-top网页滚动时固定在顶部-->
navbar-fixed-bottom在底部
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button"
                data-toggle="collapse" data-target="#mm">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="">
                <span>动漫</span>
                <img style="display: inline;border-radius: 50%" src="img/pkq07.jpg" alt="" width="32px" height="32">
            </a>
        </div>
        <div id="mm" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="">关于我们</a></li>
                <li><a href="">首页</a></li>
                <li><a href="">我们产品</a></li>
            </ul>
            <!-- 内连表单 -->
            <form class="form-inline navbar-right" action="">
                <div class="form-group">
                    <label for="username" class="sr-only">Username</label>
                    <input class="form-control" type="text" id="username" placeholder="please input username">
                </div>
                <div class="form-group">
                    <label for="password" class="sr-only">Password</label>
                    <input class="form-control" type="text" id="password" placeholder="please input password">
                </div>
                <button type="button" class="btn btn-success">
                    登录<span class="glyphicon glyphicon-ok"></span>
                </button>
            </form>
            <button class="btn btn-info navbar-btn" type="button">提问</button>
            <p class="navbar-text">
                欢迎使用小知
            </p>
        </div>
    </div>
</div>

    • 横排 + / (戏称面包屑)

      <ol class="breadcrumb">
    <li><a href="">吃饭</a></li>
    <li><a href="">睡觉</a></li>
    <li><a href="">打豆豆</a></li>
</ol>

    • 分页

      pagination-lg大
<ul class="pagination pagination-lg">
    <li><a href="">&laquo;</a></li>
    <li><a href="">1</a></li>
    <li class="active"><a href="">2</a></li>
    <li><a href="">&raquo;</a></li>
</ul>
默认
<ul class="pagination">
    <li><a href="">&laquo;</a></li>
    <li><a href="">1</a></li>
    <li class="active"><a href="">2</a></li>
    <li><a href="">&raquo;</a></li>
</ul>
pagination-sm小
<ul class="pagination pagination-sm">
    <li><a href="">&laquo;</a></li>
    <li><a href="">1</a></li>
    <li class="active"><a href="">2</a></li>
    <li><a href="">&raquo;</a></li>
</ul>
另一个样式 	previous左对齐，next右对齐
<ul class="pager">
    <li class="previous"><a href="">&laquo;</a></li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li class="next"><a href="">&raquo;</a></li>
</ul>

    • 徽章

      <span class="badge">1118</span>
<button class="btn btn-info" type="button">
    messages<span class="badge">199</span>
</button>

    • 巨幕

      <div class="jumbotron">
    <h3>新影片抢先看</h3>
    <p class="bg-info">
        123
    </p>
    <p class="bg-primary">
        456
    </p>
    <p class="bg-danger">
        789
    </p>
</div>
//图片下面+说明
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/1.gif" alt="" width="100%">
                <div class="caption">
                    <h3>美女与野兽<small>百知</small></h3>
                    本电影讲述了哔哩哔哩
                </div>
            </div>
        </div>
     </div>
</div>

    • 警告框

      <div class="container">
    <div class="alert alert-danger">321</div>
    <div class="alert alert-info">321</div>
    <div class="alert alert-success">321</div>
    <div class="alert alert-warning">321</div>
</div>
//可关闭的警告框
<div class="alert alert-warning">
        <button class="close" type="button" data-dismiss="alert">&times;</button>
        321
</div>

    • 进度条

      <!--自己实现-->
<div style="border: solid 1px pink;background-color: inherit;width: 100%;height: 20px">
    <div style="background-color:red;width: 10%;height: 18px"></div>
</div>
<hr>

<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<hr>

//会动的，需要script
<div class="progress">
    <div id="bar" class="progress-bar progress-bar-striped" style="width: 10%">
        <span>10%</span>
    </div>
</div>

//script
<script>
    $(function(){
        function fun(){
            let w = $('#bar').attr('style').split(':')[1].trim()
            // parseInt()截取前边数字
            let n = parseInt(w);
            $('#bar').css('width', (++n) + '%');
            if(n>90){
                // 清除定时器
                clearInterval(tid);
            }
        }
        //声明一个定时器
        let tid = setInterval(fun, 100);
    })
</script>

    • 列表组

      <ul class="list-group">
        <li class="list-group-item list-group-item-danger"><a href="">吃饭</a></li>
        <li class="list-group-item list-group-item-success"><a href="">睡觉</a></li>
        <li class="list-group-item list-group-item-info"><a href="">打豆豆</a></li>
</ul>
<!-- 第二种用div构建 -->
<div class="list-group">
        <button class="btn btn-default list-group-item" type="button">吃饭</button>
        <button class="btn btn-default list-group-item" type="button">睡觉</button>
        <button class="btn btn-default list-group-item" type="button">打豆豆</button>
</div>

    • 面板

      <!-- panel-danger边框 -->
<div class="panel panel-danger">
        <div class="panel-heading">
            <h2 class="page-header">请登录</h2>
            <!-- <h3 class="panel-title">呵呵</h3>-->
        </div>
        <div class="panel-body">
            <form action="">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" id="username">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password">
                </div>
                <input type="button" class="btn btn-success" value="登录">
                <input type="button" class="btn btn-primary" value="重置">
            </form>
        </div>
        <div class="panel-footer">
            <p>请按正确的用户名密码登录</p>
        </div>
</div>

<!-- 表格的-->
<div class="panel panel-success">
        <div class="panel-heading">
            <h3>产品信息展示</h3>
        </div>
        <div class="panel-body">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>苹果</td>
                    <td>3.5</td>
                </tr>
                </tbody>
            </table>
        </div>
</div>

    • 模态框

      点击添加唤出模态框
<button class="btn btn-danger" type="button" data-toggle="modal" data-target="#md">添加</button>
<button class="btn btn-danger" type="button" id="showBtn">show</button>
<button class="btn btn-danger" type="button" id="btn">btn</button>

<!--fade添加动态效果，可以控制模态框大的背景-->
<div class="modal fade" id="md" style="background-image: url(static/img/1.gif)">
    <!--modal-dialog用于控制模态框的大小,默认md,大lg，小sm，自定义style-->
    <div class="modal-dialog mdal-lg">
      <!--控制模态框内容区域背景-->
        <div class="modal-content" style="background-image: url(static/img/1.gif)">
            <div class="modal-header">
                <!-- 关闭按钮-->
                <button class="close" type="button" data-dismiss="modal">&times;</button>
                <h3>请登录</h3>
            </div>
            <div class="modal-body">
                <form action="">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="text" class="form-control" id="username" name="username">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="text" class="form-control" id="password" name="password">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" type="button">登录<span class="glyphicon glyphicon-ok"></span></button>
                <button class="btn btn-primary" type="button">取消<span class="glyphicon glyphicon-remove"></span>
                </button>
                <button class="btn btn-danger" type="button" id="hideBtn">hide</button>
            </div>
        </div>
    </div>
</div>


<script>
    $(function () {
        //初始化模态框
        $('#md').modal({
            backdrop: 'static',   //将模态框指定为静态的，不能通过点击空白处关闭模态框
            show: false,   //控制初始化后模态框是否展示出来，默认为true
            keyboard: true,   //代表是否可以通过按Esc键退出模态框，默认为true
            //remote:'index.html'     //加载远程内容
        });
        //显示modal的方法
        $("#showBtn").click(function () {
            $('#md').modal('show');
        });
        //隐藏model的方法
        $("#hideBtn").click(function () {
            $('#md').modal('hide');
        });

        $('#btn').on('click', function () {
            alert(111);
        })
        // 操作模态框事件
        $('#md').on('show.bs.modal', function () { //调用show方法的时候出发
            console.log('show modal');
        })
        // 操作模态框事件
        $('#md').on('shown.bs.modal', function () {    //当模态框展示完毕后触发
            console.log('shown modal');
        })

        $('#md').on('hide.bs.modal', function () {    //当模态框隐藏时触发
            console.log('hide modal');
        })
        $('#md').on('hidden.bs.modal', function () {    //当模态框隐藏完时触发
            console.log('hidden modal');
        })
        $('#md').on('loaded.bs.modal',function(){   //远端数据加载时触发
            console.log('loaded remote data');
        })
    })
</script>

    • 下拉菜单

      <div class="container">
    <div class="dropdown" id="dd">
        <button type="button" class="btn btn-default" data-toggle="dropdown">
            水果<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="sg">
            <li><a href="">苹果</a></li>
            <li><a href="">西瓜</a></li>
            <li><a href="">橘子</a></li>
        </ul>
    </div>
    <div class="dropdown">
        <a href="" class="btn btn-default" data-toggle="dropdown">
            水果<span class="caret"></span>
        </a>
        <ul class="dropdown-menu" id="">
            <li><a href="">苹果</a></li>
            <li><a href="">西瓜</a></li>
            <li><a href="">橘子</a></li>
        </ul>
    </div>
</div>

<script>
    $(function(){
        $('#dd').on('show.bs.dropdown',function(){  //点击就触发
            alert('show');
        });
        $('#dd').on('shown.bs.dropdown',function(){ //效果渲染后触发
            alert('shown');
        });
    })
</script>

    • 滚动监听

      <div class="container">
    <div id="nv">
        <ul class="nav nav-tabs">
            <li><a href="#mo">默</a></li>
            <li><a href="#yuan">圆</a></li>
            <li><a href="#hang">航</a></li>
        </ul>
    </div>
    <div id="dd" style="height: 200px;overflow: scroll" data-spy="scroll" data-target="#nv">
        <h3 id="mo">默</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eos fuga inventore molestias temporibus? Ad alias corporis cupiditate non tenetur. Aliquid cumque dolor maxime mollitia nesciunt pariatur quasi quis vel?
        <h3 id="yaun">圆</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque exercitationem hic impedit iusto maiores molestiae molestias nihil nisi, obcaecati odio, possimus provident quos sunt temporibus totam voluptas voluptatum.
        <h3 id="hang">航</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam, assumenda atque blanditiis dolorem ex impedit in molestias natus necessitatibus nemo non possimus, quos, recusandae repudiandae sapiente sequi similique voluptatem.
    </div>
</div>

    • 手风琴

      <div class="container">
    <a href="#m1" class="btn btn-default" data-toggle="collapse">显示信息</a>

    <div class="collapse" id="m1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aspernatur autem debitis dignissimos
        eius excepturi, in iure mollitia nesciunt pariatur perferendis, quae quia sed sequi, vero voluptas? Laudantium,
        recusandae?
    </div>

    <div class="panel-group" id="acc">
        <div class="panel panel-info">
            <div class="panel-heading">
                <a href="#pn1" class="collapsed" data-toggle="collapse" data-parent="#acc">员工信息</a>
            </div>
            <div class="panel-collapse collapse" id="pn1">
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores culpa cupiditate dolore
                    ea
                    enim, fugit hic in, magnam molestias nesciunt perferendis possimus quas recusandae repellendus saepe
                    sequi,
                    sunt vel!
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur atque delectus dicta
                    dolor
                    dolore ducimus eligendi est explicabo, iure nobis quae quaerat quam repellendus similique tempora
                    veritatis
                    voluptatum! Illum.
                </div>
            </div>
        </div>

        <div class="panel panel-info">
            <div class="panel-heading">
                <a href="#pn2" class="collapsed" data-toggle="collapse" data-parent="#acc">部门管理</a>
            </div>
            <div class="panel-collapse collapse" id="pn2">
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam amet architecto, cumque
                    cupiditate,
                    earum expedita fuga impedit in labore laborum minus neque officiis porro possimus quaerat reiciendis
                    repellendus, sit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eos fugiat necessitatibus nobis
                    ut,
                    vel. Ducimus earum eos facilis fuga possimus quam rerum, veritatis! Cum odit omnis optio quis quod?
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="panel-group" id="acc2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <!--data-parent关联到同一面板组，只允许展开一个，不允许同时展开多个-->
                        <a href="#dept" class="collapsed" data-toggle="collapse" data-parent="#acc2">部门管理</a>
                    </div>
                    <!--in默认展开当前-->
                    <div class="panel-collapse collapse in" id="dept">
                        <div class="panel-body">
                            <a href="" class="btn btn-default">查看部门信息</a>
                            <a href="" class="btn btn-default">编辑部门信息</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a href="#emp" class="collapsed" data-toggle="collapse" data-parent="#acc2">员工管理</a>
                    </div>

                    <div class="panel-collapse collapse" id="emp">
                        <div class="panel-body">
                            <a href="" class="btn btn-default">查看员工信息</a>
                            <a href="" class="btn btn-default">编辑员工信息</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--展示信息-->
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    xxxxx
                </div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Salary</th>
                            <th>Age</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>mo</td>
                            <td>20000.0</td>
                            <td>18</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

    • 轮播图

      <div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <!--slide控制轮播动画，data-ride="carousel"开始轮播，data-interval控制轮播时间-->
            <div class="carousel slide" data-ride="carousel" data-interval="2000" id="cs">

                <!--控制按钮-->
                <ol class="carousel-indicators">
                    <!--data-target对应哪个轮播图ID；data-slide-to代表第几张图片，下标从零开始-->
                    <li data-target="#cs" data-slide-to="0"></li>
                    <li data-target="#cs" data-slide-to="1"></li>
                    <li data-target="#cs" data-slide-to="2"></li>
                    <li data-target="#cs" data-slide-to="3"></li>
                </ol>

                <div class="carousel-inner">
                    <!--active从这个开始轮播-->
                    <div class="item active">
                        <img src="static/img/1.gif" alt="" width="100%">
                        <div class="carousel-caption">
                            123
                        </div>
                    </div>
                    <div class="item">
                        <img src="static/img/1.jpg" alt="" width="100%">
                        <div class="carousel-caption">
                            456
                        </div>
                    </div>
                    <div class="item">
                        <img src="static/img/2.jpg" alt="" width="100%">
                        <div class="carousel-caption">
                            789
                        </div>
                    </div>
                    <div class="item">
                        <img src="static/img/3.jpg" alt="" width="100%">
                        <div class="carousel-caption">
                            000
                        </div>
                    </div>
                </div>
                <!--加入上一张和下一张的控制按钮-->
                <a href="#cs" class="carousel-control left" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#cs" class="carousel-control right" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>

</div>

    • 标签页

      <ul class="nav nav-tabs">
        <li><a href="#mo" data-toggle="tab">默</a></li>
        <li><a href="#yuan" data-toggle="tab">圆</a></li>
        <li><a href="#hang" data-toggle="tab">航</a></li>
</ul>
<div class="tab-content">
        <div class="tab-pane" id="mo">
            年方十八
        </div>
        <div class="tab-pane" id="yuan">
            年方十九
        </div>
        <div class="tab-pane" id="hang">
            年方十八
        </div>
</div>

    • 按钮弹出框

      <!--tooltip         data-placement="left"指定出来的位置，默认上面-->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示" data-placement="left" id="btn">see me</button>

<button type="button" class="btn btn-default" data-toggle="popover" title="title" data-content="主体内容" id="po">按钮</button>
    
$(function(){
        // 必须调用函数初始化
        $('#btn').tooltip({
            animate:true,       //出现的动画，默认为true
            delay:1000      //延迟多久出来的时间
        });
        // 手动初始化
        $('#po').popover();
    })

    • 警告框

      <div class="alert alert-danger">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    123
</div>
爱猊丿
关注
专栏目录
动物世界
m0_64212834的博客
03-18 1201
补充程序 ： 1、实现Mammal类的方法 2、由Mammal类派生出Dog类，在Dog类中增加itsColor成员(COLOR类型) 3、Dog类中增加以下方法： constructors: Dog()、Dog(int age)、Dog(int age, int weight)、Dog(int age, COLOR color)、 Dog(int age, int weight, COLOR color)、~Dog() accessors: GetColor()、SetColor() Othe
Java实验5 -- 动物世界
兜兜的博客
06-13 1412
补一波。。
动物世界网站
03-29
用dreamweaver做的一个网站，一个简单的网站，可以作为参考，排版不是很好
可爱宠物狗狗bootstrap网页模板
04-09
可爱宠物狗狗bootstrap网页模板
Bootstrap：百科
weixin_30340617的博客
02-01 387
ylbtech-Bootstrap：百科 Bootstrap （Web框架）Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bo...
HTML网页制作——动物主题网页设计（简单源码）
01-09 974
📂文章目录一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、💠网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 一、👨‍🎓网站题目 🐕 宠物网页设计 、🐼保护动物网页、🐋鲸鱼海豚主题、🐘保护大象、等网站的设计与制作。 二、✍️网站描述 🏷️HTML宠物网页设计，采用DIV+CSS布局，共有
网页制作课程设计（野生动物园）
qq_49750651的博客
07-14 3337
本篇文章展示由纯html与css代码实现的野生动物园静态页面网站设计，通过大量html与css语言对页面结构、样式进行实现。希望您仔细认真阅读完后有所启发。 一、网页整体搭建 该页面网站又首页、园区介绍、游园指南、互动展示四大部分组成，用户可通过点击不同板块进入浏览，野生动物园网站整体层次图如下。 二、首页页面 2.1 构建基本结构框架图 首页页面整体由六大部分组成，菜单栏、视频栏、内容栏（两栏）、版权栏、导航栏，如下图所示。 2.2 实...
【web前端期末大作业】制作一个HTML+CSS保护动物宠物网页
qq_38517951的博客
05-08 189
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
HTML学生个人网站作业设计：(宠物官网8页)——bootstarp响应式含有轮播图，响应式页面
qq_524614081的博客
11-18 592
html5网页制作代码 html5网页设计作业代码 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
绿色动物世界日志网页模板
01-18
绿色动物世界日志网页模板
动物园网站模板
12-13
动物园网站模板 黄色 商务 网页 模板 狮子 动物园 动物 商业 主页 HTML DIV+CSS 模板下载
Bootstrap五星评价，五颗星星
02-03
Bootstrap五星评价系统是一种常见于电商网站、用户反馈和产品评分中的设计元素，它允许用户以图形化的方式对产品或服务进行一到五星的评级。在本文中，我们将深入探讨Bootstrap框架如何实现这样的功能，以及其背后的...
第五章之BootStrap 栅格系统
01-19
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 学习要点： 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习...
bootstrap-5-columns:Bootstrap 五列布局
06-22
Bootstrap 五列布局。 这是受此启发。 它利用 Bootstrap 自己的 LESS mixin 函数是最干净、更面向未来的解决方案。 此外，它还为您提供了所有offset 、 pull 、 push类。 快速查看源代码表明，我可以使用./less/...
MaterialPro五套bootstrap4响应式后台模板
01-25
"MaterialPro五套bootstrap4响应式后台模板"是一个专门为后台管理系统设计的资源包，它利用Bootstrap4的特性，提供了五种不同风格的皮肤模板，以满足不同设计需求。 1. **Dark模板**：这款模板采用深色背景，通常能...
bootstrap五等分代码CSS和圆形按钮css
04-27
bootstrap五等分代码CSS和圆形按钮css，讲文档添加到bootstrap.css的最后直接写class即可。非常好用
【BootStrap笔记】BootStrap+css写旅游网页面
暮色年华的博客
03-25 1523
页面效果： 知识点总结： Bootstrap： class="container-fluid"：表示块元素width%100 <div class="row"></div>：Bootstrap 中，“row”类主要用于保存其中的列。Bootstrap 将每一行划分为 12 个虚拟列 class="img-responsive":响应式图片 class="col-xx-x"：设置块元素占的列数（根据设备大小） class="thumbnail...
130套宠物CSS模板动物行业响应式宠物饲养Html5网站模板动物标本馆官方网站模板动物世界专题展示模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应
创小董
01-01 437
130套宠物CSS模板动物行业响应式宠物饲养Html5网站模板动物标本馆官方网站模板动物世界专题展示模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应。 不仅仅是首页，二级页面，三级页面，登陆，购物车等，页面齐全 功能齐全 js+css+html (img,字体均有)，前端html纯静态页面！无后台！可用dreamweaver，sublime ，Webst。 下载地址 130套宠物CSS模板动物行业响应式宠物饲养Html5网站模板动物标本...
动物世界百度词条网页bootstrap
最新发布
04-03
动物世界是一个百度词条网页，它提供了关于各种动物的详细信息。Bootstrap是一种流行的前端开发框架，它可以帮助开发者快速构建响应式和美观的网页界面。 在动物世界百度词条网页中，你可以找到关于不同动物的分类、特征、习性、分布等详细信息。这些信息可以帮助你更好地了解动物的多样性和生态系统的运作。 而Bootstrap是一个开源的前端框架，它提供了一系列的CSS样式和JavaScript插件，可以帮助开发者快速构建现代化的网页界面。Bootstrap具有响应式设计，可以适应不同屏幕大小的设备，包括电脑、平板和手机等。它还提供了丰富的组件和样式，使得网页开发更加简单和高效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值