Bootstrap的学习

已于 2022-10-19 18:59:59 修改
阅读量381 收藏 4
点赞数
文章标签： bootstrap 学习 前端
于 2022-10-19 18:57:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hgyyr/article/details/127413760
版权

BootStrap的应用

1、BootStrap的简介
1、官网
  https://www.bootcss.com/
2、选择3版本，比较稳定
3、Bootstrap是一个用于快速开发 web 应用程序和网站的前端框架。
 Bootstrap是基于HTML、CSS、JAVASCRIPT的。响应式布局
 让web开发更简单、更快速
2、BootStrap的模板
<!DOCTYPE html>
<html lang="en">
	<head>
		<!--设置当前HTML文件的字符编码-->
		
		<!--compatible兼容的，设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）-->
		
		<!--声明当前网页在移动端浏览器展示的相关设置-->
		<!-- 
			viewport表示用户是否可以缩放页面
			width指定视区的逻辑宽度
			device-width指定视区宽度应为设备的屏幕宽度
			initial-scale指令用于设置Web页面的初始化缩放比例
			initial-scale-1则将显示未经缩放的Web文档
		 -->
		
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap基本的HTML模板</title>
		<!--引入Bootstrap核心样式表(CSS)文件-->
		<link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
		<!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签-->
		<!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询-->
		<!--[if It IE 9]>
		<script src="html5shiv/html5shiv.min.js"></script>
		<script src="Respond/respond.min.js"></script>
		<![endif]-->
		<!--自己写的CSS样式文件放head最下面-->
	</head>
	<body>
		<div><h1>Hello,world!</h1></div>
		<!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边-->
		<script src="js/jquery.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<!--自己写的js文件放在body最下面-->
	</body>
</html>
3、下载安装
http://v3.bootcss.com/css/
4、下载后使用步骤
1、拷贝dist/css的bootstrap.min.css到项目css中
2、拷贝dist/js的bootstrap.min.js到项目的js中去
3、引入jquery


<!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>bootstrap的表单</title>
    <script src="../jquery/jquery.3.6.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>

<body>
    
</body>

</html>
5、学习样式
5.1布局容器
 1、布局容器
    1） .container类用于固定宽度支持响应式布局的容器
    <div class="container">
    ...
    </div>
   2）.container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器
      <div class="container-fluid">
        ...
      </div>

<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-8">8列</div>
    </div>
</div>s
5.2栅格网格系统
      BootStrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

      网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或32份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出来强大的响应式网格系统。BootStrapu框架中的网格系统就是将容器平分成12份。
注意：网格系统必须使用到CSS

     container、row、xs（xsmall phones），sm（small tablets），md（middle desktops），lg（laege desktops），即
超小屏（自动），小屏（750px），中屏（970px）和大屏（1170px）
数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）。在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。具体内容应当放置在列容器之内。

在这里插入图片描述

5.2.1列偏移
简单来说，就是bootstrap把布局分成了行和列的形式，直接使用样式就可以表现出来，就等于你可以直接使用它提供的盒子，不用再去写css样式，比如说一个留白的盒子就是:<div class="container"></div>，然后就是写行样式col-md-列数。然后一定加起来=12，不然会掉。接下来就是列偏移，不希望相邻的两个列靠在一起，就可以使用列偏移来实现。就在列元素添加类名col-md-offset-*,*号表示要偏移的列组合数，这个类名的列就会向右偏移

 <div class="container">

        <div class="row">
          
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1 col-md-offset-1">1</div>
           
            <div class="col-md-6">6</div>
            <div class="col-md-2">2</div>
        </div>
5.2.2列排序
   列排序就是改变列的方向，就是改变左右浮动，并且设置浮动的距离，在Bootstrap框架的网格系统中通过添加类名col-md-push-*和col-md-pull-*（*号表示移动的列的组合数），往前pull、往后push

 <div class="container">

        <div class="row">

            <div class="col-md-1 " style="background-color:red ;">1</div>
            <!-- push向右浮动 后面的元素会覆盖前面的元素 -->
            <div class="col-md-1 col-md-push-5" style="background-color:green ;">1</div>
            <div class="col-md-1 " style="background-color:yellow ;">1</div>
            <!-- pull向左浮动，会覆盖前面的元素 -->
            <div class="col-md-1  col-md-pull-1" style="background-color:blue;">1</div>
            <div class="col-md-1 " style="background-color:pink;">1</div>
            
        </div>
    </div>
5.2.3列嵌套
  bootstrap框架的网格系统还支持列的嵌套，可以在一个列中添加一个或者多个行容器，然后在这个行容器中插入列：就是在行中的列又被当做行，里面嵌入12列

<div class="container">

        <div class="row">
            <!-- 匹配大屏幕  -->
            <div class="col-md-1" style="background-color:red ;">1</div>
            <div class="col-md-1" style="background-color:blue ;">1</div>
            <div class="col-md-1" style="background-color:yellow;">1</div>
            <div class="col-md-1" style="background-color:orange ;">1</div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3" style="background-color:red ;">3</div>
                    <div class="col-md-3" style="background-color:blue ;">3</div>
                    <div class="col-md-3" style="background-color:yellow;">3</div>

                </div>
            </div>
            <div class="col-md-2">2</div>
        </div>
    </div>
5.3媒体查询

判断系统的分辨率

   在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
   /* 超小屏幕（手机，小于 768px） */
   /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

  /* 小屏幕（平板，大于等于 768px） */
  @media (min-width: @screen-sm-min) { ... }

  /* 中等屏幕（桌面显示器，大于等于 992px） */
  @media (min-width: @screen-md-min) { ... }

  /* 大屏幕（大桌面显示器，大于等于 1200px） */
  @media (min-width: @screen-lg-min) { ... }
5.4栅格的参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akobFbHm-1666176993592)(C:\Users\杨怡然\Desktop\捕获.PNG)]

5.5常用文字样式
5.5.1排版的文字样式
BootStrap和普通的HTMl页面一样，对h1heh6有了其他的处理，为了不是标题的样式有标题的效果，也定义了一些样式进行设置

1、标题
 1) bootstrap对h1-h6的标题效果进行覆盖，提供了对应的类名，为非标体元素设置样式  比如： .h1~.h6
 2)副标题 ：small标签或者.small类名

h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
   
    <div>你好</div>
    <div class="h3">你好</div>


  <h1>标题1 <small>副标题</small></h1>
  <h1>标题1 <span class="small">副标题</span></h1>

2、段落
   段落是排版中的一个重要元素之一，通过.lead来突出强调内容，（就是增大文本字号，加粗文本而且对行高和margin也做相应的处理，可以使用下面的标签给文本做出突出样式处理
    <small>:小号字
    <b><strong>:加粗
    <i><em>:斜体
    

3、强调
  定义了一套类名，强调类名，强调类都是通过颜色来表示强调

  .text-muted：提示，使用浅灰色

  .text-primary：主要，使用蓝色

  .text-success：成功，使用浅绿色

  .text-info：通知信息，使用浅蓝色

  .text-warning：警告，使用黄色

  .text-danger：危险，使用褐色

    <hr>
    <!-- 对文本设置颜色 -->
    <div class="text-muted">提示效果</div>
    <div class="text-primary">主要效果</div>
    <div class="text-success">成功效果</div>
    <div class="text-info">通知信息</div>
    <div class="text-warning">警告</div>
    <div class="text-danger">危险</div>


4、对齐
  text-left：左对齐
  text-center:居中对齐
  text-right:右对齐
  text-justify：两端对齐

5、代码风格
   用标签包裹
   单行： <code></code>
   快捷键：<kbd></kbd>s
   多行：<pre></pre>
5.6表格
5.6.1表格样式
  bootstrap为表格提供了1中基础样式和4种附加样式以及一个支持响应式的表格，在使用bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格
5.6.1.1 基础样式
.table:基础表格
5.6.1.2 附加样式
  1)table-striped:斑马线表格
  2）table-bordered：带边框的表格
  3）table-hover：鼠标悬停高亮的表格
  4）table-condensed：紧凑型表格，单元格没内边距或者内边距较小
5.6.2 tr、th、td样式
提供了五中不同的类名，每种类名控制了行的不同的背景颜色
 .active:将悬停的颜色应用在行或者单元格上
 .success:表示成功的操作
 .info:表示信息变化的操作
 .warning:表示一个警告的操作
 .danger:表示一个危险的操作
5.7表单
  表单主要功能是用来和用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通，表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等
5.7.1 表单控件
  .form-control    .input-lg (较大)    .input-sm  (较小)
5.7.1.1 输入框text
<div class="row">
        <div class="col-md-3">
            <input type="text" class="form-control"><br>
            <input type="text" class="form-control  input-lg"><br>
            <input type="text" class="form-control input-sm"><br>
        </div>
    </div>
5.7.1.2 下拉选择框
<div class="row">
        <div class="col-md-3">
            <select class="form-control">
                <option>请选择城市</option>
                <option>上海</option>
                <option>重庆</option>
                <option>海南</option>
            </select>
        </div>
    </div>
5.7.1.3 文本域
<div class="row">
        <div class="col-md-3" class="form-control">
            <textarea ></textarea>
        </div>
    </div>
5.7.1.4 复选框
垂直显示：.checkbox
水平显示：.checkbox-inline

       <!-- 垂直显示 -->
    <div class="row">
        <div class="col-md-3">
           
            <div class="checkbox">
                <label><input type="checkbox" name="hobby">唱歌 </label>

            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="hobby">跳舞 </label>

            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="hobby">干饭 </label>

            </div>
        </div>
    </div>

水平显示
<div class="row">
        <div class="col-md-3">
           

            <label class="checkbox-inline"><input type="checkbox" name="hobby">唱歌 </label>


            <label class="checkbox-inline"><input type="checkbox" name="hobby">跳舞 </label>



            <label class="checkbox-inline"><input type="checkbox" name="hobby">干饭 </label>

        </div>
    </div>
5.7.1.5 单选框
<!-- 垂直居中 -->
    <div class="row">
        <div class="col-md-3">
           
            <div class="radio">
                <label><input type="radio" name="hobby">女 </label>

            </div>
            <div class="radio">
                <label><input type="radio" name="sex">男 </label>

            </div>
  
        </div>
    </div>

水平显示
 <div class="row">
        <div class="col-md-3">
           

            <label class="checkbox-inline"><input type="radio" name="sex">男 </label>


            <label class="checkbox-inline"><input type="radio" name="sex">女 </label>


        
        </div>
    </div>
5.7.1.5 按钮
基础样式：.btn
附加样式： btn-primary、 btn-info、btn-sucess、btn-warning、 
          btn-danger、btn-link、 btn-default

    <button class="btn">按钮</button>
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-sucess">按钮</button>
    <button class="btn btn-default">按钮</button>
    <button class="btn btn-link">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-parmary">按钮</button>

设置按钮的大小
   <button class="btn btn-default" >按钮</button>
    <button class="btn btn-link btn-lg">按钮</button>
    <button class="btn btn-info btn-sm">按钮</button>

其他元素通过按钮样式设置
<!-- 通过按钮样式设置其他元素为按钮效果 -->
    <a href="" class="btn">连接</a>
    <a href="" class="btn btn-default ">连接</a>
    <span class="btn-info">span元素</span>
5.7.2 表单布局
   基本的表单结构是bootstrap自带的，个别的表单空间自动接收一些全局样式，下面是创建表单的基本步骤
   1）向父<form>元素添加role="form"：表明当前角色是表单
   2）把标签和控件放在一个带有class.form-group的div中，这是获取最佳间距所必需的
   3）向所有的文本元素<input>、<textarea></textarea>和select       添加class="form-control",
5.7.2.1水平表单
  同一行显示form-horizontal
  配合bootstrap框架的网格系统
   form-control:是代表表单元素的样式

<!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>
    <script src="../jquery/jquery.3.6.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        form {
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <!-- 表单布局
      水平表单
      设置样式
    <form class="form-horizontal" role="form">
    form-control:是代表表单元素的样式
    -->

    <form action="#" class="form-horizontal" role="form">

        <!-- 这里用divclass="form-group"包起来就
           是代表接下来的label和表单控件是一组的

        -->
        <div class="form-group">
            <!-- class="text-center" -->

            <!-- 当label的for属性和input的id属性保持一致，点击label的文字就会自动聚焦 -->
            <h2 align="center">信息收集表</h2>
            <label for="uname" class="control-label col-md-4">姓名</label>
            <div class="col-md-6">
                <input type="text" id="uname" class="form-control">

            </div>
        </div>


        <!-- 密码框 -->
        <div class="form-group">
            <!-- class="text-center" -->

            <label for="upwd" class="control-label col-md-4">密码</label>
            <div class="col-md-6">
                <input type="password" id="upwd" class="form-control">

            </div>
        </div>


        <!-- 复选框 -->
        <div class="form-group">

            <label class="control-label col-md-4">爱好</label>
            <div class="col-md-6 col-md-offset-2" >
                <label class="checkbox-inline"><input type="checkbox" name="hobby">唱歌 </label>


                <label class="checkbox-inline"><input type="checkbox" name="hobby">跳舞 </label>



                <label class="checkbox-inline"><input type="checkbox" name="hobby">干饭 </label>

            </div>

        </div>

        <!-- 下拉框-->
    <div class="form-group">
        <label for="city" class="control-label col-md-4">地点</label>
        <div class="col-md-6">
            <select class="form-control" id="city">
                <option>请选择城市</option>
                <option>上海</option>
                <option>重庆</option>
                <option>海南</option>
            </select>
        </div>
    </div>


        <!-- 简介-->
        <div class="form-group">
            <label for="remark" class="control-label col-md-4">简介</label>
            <div class="col-md-6">
               <textarea  id="remark" class="form-control"></textarea>
            </div>
        </div>



        <!-- 提交按钮 -->
    <!-- 下拉框-->
    <div class="form-group">

        <div class="col-md-12 col-md-offset-6">
           <button class="btn btn-warning">提交</button>
        </div>
    </div>
    </form>


</body>

</html>
5.7.2.2 内联表单
   将表单的控件都在一行内显示form-inline
   注意label不会显示，存在的意义：如果没有为输入的控件设置label标签，屏幕阅读器将无法正常识别

<!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>bootstrap的表单</title>
    <script src="../jquery/jquery.3.6.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        form{
            margin: 50px auto;
            padding: 20px;
        }
    </style>
</head>

<body>
    <!-- 内联表单： -->

    <!-- form-inline表示在一行 -->
    <form action="" class="form-inline">
        <!-- 文本 -->
        <div class="form-group">
            <label for="uname">姓名</label>
            <input type="text " id="uname" class="form-control" placeholder="请输入">
        </div>
<!-- 密码 -->
        <div class="form-group">
            <label for="password">密码</label>
            <input type="text " id="password" class="form-control">
        </div>


        <!-- 按钮 -->
        <div class="form-group">
            <button class="btn btn-info">按钮</button>
        </div>
    </form>




</body>

</html>
5.8缩略图
  缩略图在电商类的网站很常见，最常用的地方就是产品列表页面，缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容、按钮等。

缩略图添加字体图标样式步骤：
     1、搜索bootstrap菜鸟教程
     2、选择字体图标
     3、看自己喜欢的字体图标，然后复制到span的元素作为类名
     

<!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>bootstrap的模板</title>
    <script src="../jquery/jquery.3.6.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        .container{
            margin: 50px auto;
        }
    </style>
</head>

<body>
   <div class="container">
    <div class="row">
       <!-- 前三列：缩略图 -->
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="../images/bingmayong.png" alt="" style="width: 240px; height:200px">
                <h3>明星</h3>
                <p>陕西，家喻户晓</p>
                <button class="btn-blue">
                    <span class="glyphicon glyphicon-heart"></span>喜欢
                </button>
                <button class="btn-default">
                    <span class="glyphicon glyphicon-pencil"></span>评论
                </button>
            </div>
        </div>

        <!-- 前三列：缩略图 -->
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="../images/qingdonglin.png" alt="" style="width: 240px; height:200px">
                <h3>明星</h3>
                <p>陕西，家喻户晓</p>
                <button class="btn-blue">
                    <span class="glyphicon glyphicon-heart"></span>喜欢
                </button>
                <button class="btn-default">
                    <span class="glyphicon glyphicon-pencil"></span>评论
                </button>
            </div>
        </div>

        <!-- 前三列：缩略图 -->
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="../images/qiao.png" alt="" style="width: 240px; height:200px">
                <h3>明星</h3>
                <p>陕西，家喻户晓</p>
                <button class="btn-blue">
                    <span class="glyphicon glyphicon-heart"></span>喜欢
                </button>
                <button class="btn-default">
                    <span class="glyphicon glyphicon-pencil"></span>评论
                </button>
            </div>
        </div>

        <!-- 前三列：缩略图 -->
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="../images/dongfangmingzhu.png" alt="" style="width: 240px; height:200px">
                <h3>明星</h3>
                <p>陕西，家喻户晓</p>
                <button class="btn-blue">
                    <span class="glyphicon glyphicon-heart"></span>喜欢
                </button>
                <button class="btn-default">
                    <span class="glyphicon glyphicon-pencil"></span>评论
                </button>
            </div>
        </div>
s

    </div>
   </div>



</body>

</html>
5.9面板
   默认的.panel组件，所做的只是设置基本的边框和内补来包含内容，
   .panel-default:默认样式
   .panel-heading:面板头
   .panel-body:面板主体内容

<-->可以更换颜色</-->
   <div class="panel panel-warning">
    <div class="panel-heading">
        .....
    </div>
    <div class="panel-body">
        ....
    </div>
   </div>
5.10 联合样式
5.10.1 导航
    使用下拉和按钮组合可以制作导航
    要点：

1、基本样式：.nav与nav-tabs、nav-pills组合制作导航
2、分类：
   1）标签型导航nav-tabs
   2）胶囊型导航nav-pills
   3）堆栈导航nav-stacked
   4）自适应导航nav-justified
   5）面包屑导航breadcrumb  :单独使用样式，直接加入到ol、ul中即     可，一般用于导航，主要是气的作用是甘肃用户现在所处页面的位置（当前位置
3、状态：
   1）选中状态：active样式
   2）禁用状态：disable
4、二级菜单
5.10.1.1 标签式导航
<p>标签式的导航菜单</p>
   <ul class="nav nav-tabs" >
       <!-- li标签有a元素 -->
       <li class="active">
           <a href="#">牛奶</a>
       </li>
       <li >
           <a href="#">牛奶</a>
       </li> 
       <li >
           <a href="#">牛奶</a>
       </li> 
       <li >
           <a href="#">牛奶</a>
       </li>

   </ul>
5.10.1.1 胶囊式导航
<p>胶囊式的导航菜单</p>
    <ul class="nav nav-pills" >
        <!-- li标签有a元素 -->
        <li class="active">
            <a href="#">牛奶</a>
        </li>
        <li >
            <a href="#">牛奶</a>
        </li> 
        <li >
            <a href="#">牛奶</a>
        </li> 
        <li >
            <a href="#">牛奶</a>
        </li>

    </ul>
5.10.2 分页导航
分页导航分为页码导航和翻页导航
页码导航：ul标签上面加pagination
翻页导航：ul标签上加pager
5.10.2.1 分页
 <h3>分页导航</h3>
    <ul class="pagination">
        <!-- active表示被选中状态 -->
        <li class="active">
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#">4</a>
        </li>
        <li>
            <a href="#">&raquo;</a>
        </li>

    </ul>
5.10.2.2 翻页导航
<!-- 翻页导航 -->
 
    <h3>翻页导航</h3>
    <ul class="pager">
        <!-- active表示被选中状态 -->
        <li >
            <a href="#">上一页</a>
        </li>
        <li >
            <a href="#">下一页</a>
        </li>
        

    </ul>
5.10.3 下拉菜单
   在使用bootstrap框架的下拉菜单的时候，必须使用两个js
    <script src="../jquery/jquery.3.6.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
   

注意： 
  1、使用类名为dropdown或btn-group的div，包裹整个下拉框：
  2、默认向下dropdown，向上弹起加入  dropup就可以
  3、使用button作为父菜单，使用类名dropdown-toggle和自定义的data-toggle属性
  4、在button中，使用font制作下拉箭头
  5、下拉菜单项使用一个ul列表，并且定义一个类名为dropdown-menu
  6、分组分割线：<li>添加类名divider来实现添加下拉分隔线的功能
  7、分组标题：li添加类名dropdown-header来实现分组的功能
  8、对齐方式：
      1）dropdown-menu-left：左对齐  默认样式
      2）dropdown-menu-right  右对齐
  9、激活状态：active和禁用状态disabled

<!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>bootstrap的下拉菜单</title>
    <script src="../jquery/jquery.3.6.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>

<body>
    <!-- 1、必须有两个js文件 -->
    <!-- 1、使用类名为dropdown或btn-group的div，包裹整个下拉框：
    2、默认向下dropdown，向上弹起加入  dropup就可以
    3、使用button作为父菜单，使用类名dropdown-toggle和自定义的data-toggle属性
    4、在button中，使用font制作下拉箭头
    5、下拉菜单项使用一个ul列表，并且定义一个类名为dropdown-menu
    6、分组分割线：<li>添加类名divider来实现添加下拉分隔线的功能
    7、分组标题：li添加类名dropdown-header来实现分组的功能
    8、对齐方式：
        1）dropdown-menu-left：左对齐  默认样式
        2）dropdown-menu-right  右对齐
    9、激活状态：active和禁用状态disabled -->

    <!-- 1、使用类名为dropdown或btn-group的div， -->
    <div class="dropdown">

        <!--2、使用button作为父菜单，使用类名dropdown-toggle和自定义的data-toggle属性-->
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            电视节目
            <!-- 3、设置下拉箭头 -->
            <span class="caret"></span>

        </button>
        <!-- 4、下拉菜单项使用一个ul列表，并且定义一个类名为dropdown-menu -->
        <!-- 分为标题内容、分割线等 -->
        <ul class="dropdown-menu">

            <!-- 5、分组标题：li添加类名dropdown-header来实现分组的功能 -->
            <li class="dropdown-header">
                动物世界
            </li>

            <!--  6、给类别 -->
            <li class="active"><a href="http://tv.cctv.com/lm/dwsj/" target="_blank">猩猩与大象</a></li>

            <!-- 7、添加分割线 -->
            <li class="divider"></li>

            <li class="dropdown-header">
                新闻联播

            </li>
            <li><a href="http://tv.cctv.com/lm/xwlbs" target="_blank">猩猩与大象</a></li>

        </ul>


    </div>


</body>

</html>
5.10.4 模态框
   模态框是覆盖在父窗体上的子窗体，通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些胡东。子窗体可提供信息、交互等
5.10.4.1 用法
1、通过data属性：在控制器元素上设置属性data-toggle="modal",同时设置data-target="#identifier".modal(options)或者href="identifier"来指定要切换的特定的模态框
2、通过javascript：使用这种技术，可以通过javascript来调用id=：identifier的模态框

<!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>bootstrap的模板</title>
    <script src="../jquery/jquery.3.6.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>

<body>

    <!-- 操作模态框 -->
    <!-- 1、通过data属性：在控制器元素上设置属性data-toggle="modal",同时设置data-target="#identifier".modal(options)或者href="identifier"来指定要切换的特定的模态框 -->
    <!--
     打开模态框
     $('#identifier').modal('show')
     关闭模态框
     $('#identifier').modal('hide')

-->


    <!-- 按钮设置的属性表明和模态框相关 -->
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">模态框</button>




  
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">用户信息添加</h4>
                </div>

                <!-- 添加一个表单在这儿 -->
                <div class="modal-body">

                  <form action="" class="form-horizontal" role="form">
                   <!-- 水平表单 -->
                   <!-- 姓名 -->
                 <div class="form-group">
                    <label for="uname" class="col-md-2 control-label">姓名：</label>
                     <div class="col-md-6">
                        <input type="text" id="uname" class="form-control ">

                     </div>
                 </div>

                 <!-- 密码 -->
                 <div class="form-group">
                    <label for="upwd" class="col-md-2 control-label">密码：</label>
                    <div class="col-md-6">
                        <input type="text" id="upwd" class="form-control">
                    </div>
                 </div>


                  </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <!-- 2、通过javascript：使用这种技术，可以通过javascript来调用id=：identifier的模态框 -->


    <!-- 打开按钮 -->
    <!-- <button class="btn btn-primary" id="btn">打开模态框</button> -->





    <script>
        $('#btn').click(function () {


            // 找到要打开的模态框事件的id
            $('#myModal').modal('show')

        })


        // 2、给关闭按钮添加点击事件
 


        $('#sub').click(function(){
            // 关闭模态框
            $('#myModal').modal('hide')
       
      

        })


    </script>

</body>

</html>
HGYYR
关注
Bootstrap入门（一）
qq_62331938的博客
04-27 2300
前言 大家好！我是九歌，今天我要分享的内容是Bootstrap的入门，首先老规矩先上思维导图。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Bootstrap 学习一门新的技术我们终究都逃不过三个W。What,Why,Where。 1.What——Bootstrap是什么？ Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍...
bootStrap学习
01-25
这个"BootStrap学习"资源很可能是为了帮助初学者或者开发者掌握BootStrap3.3.7版本的基础和进阶技巧。BootStrap3是BootStrap的第三个主要版本，它在2013年发布，并在后续几年内得到了广泛的应用和更新，提供了丰富的...
Bootstrap基础教程
最新发布
qq_63447955的博客
09-28 1664
Bootstrap 是一个由 Twitter 开发的开源前端框架，它基于 HTML、CSS 和 JavaScript。Bootstrap 的设计初衷是为了快速开发响应式和移动设备优先的 Web 应用程序。自 Bootstrap 3 版本起，框架中融入了移动设备优先的样式，这意味着开发人员可以轻松地创建在不同设备上都能良好显示的网页。Bootstrap允许你通过CSS变量和Sass/Less来自定义主题和组件。同时，Bootstrap的栅格系统和许多组件都是响应式的，可以自动适应不同尺寸的屏幕。
Bootstrap学习
weixin_45790889的博客
03-28 670
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210507110807987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc5MDg4OQ==,size_16,color_FFFFFF,t_70
bootstrap学习
02-14
这个"bootstrap学习"的压缩包显然包含了一些基本的学习资源，让我们详细探讨一下Bootstrap的主要知识点。 首先，Bootstrap的核心特性在于其响应式网格系统。这个系统基于12列的布局，允许开发者通过简单的类选择器...
分享bootstrap学习笔记心得(组件及其属性)
11-29
Bootstrap包含有丰富的组件，根据提供的组件，开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、...
BootStrap学习手册.pdf
04-04
Bootstrap是一款流行的前端开发框架，由Twitter推出，其设计理念在于简化web开发流程，特别是响应式网页设计。它包含了HTML、CSS以及JavaScript的框架，允许开发者利用一套标准化的组件来快速构建现代化、响应式的...
bootstrap学习资料
08-17
这一份文档资源，是平时有空边学习边整理，希望对一开始接触bootstrap的人有所帮助
bootstrap.min.js
03-06
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，
bootstrap.min.css
11-16
bootstrap.min.css, jquery.min.js, popper.min.js,bootstrap.min.js,包含使用说明
Bootstrap框架学习
2023也要一起加油鸭
03-01 656
文章目录1.Bootstrap的概念2.Bootstrap的好处3.快速入门知识讲解4.Bootstrap的响应式布局5.CSS样式和JS插件（具体使用去Bootstrap中文官网查找）5.1 全局CSS样式5.2 组件5.3 轮播图6.Bootstrap练习 1.Bootstrap的概念 一个前端开发框架，Bootstrap 基于 HTML、CSS、JavaScript 的，它简洁灵活，......
BootStrap框架学习
shenghuo12582的博客
04-23 766
名称bs标题1<span class="small">副标题</span></div><li class="dropdown-header">--各类内容2</li><div class="col-md-8">8列</div><div class="col-md-1 col-md-offset-8">偏移整体推
Bootstrap的简单学习
穹妹纸的博客
06-10 184
当我们把前端三剑客HTML,css,JavaScript的基础知识都学习完的时候,我们发现,应用这些基础知识还是很难做出一个美观的页面的,代码量会非常大,甚至我们根本不知道怎么去美化HTML页面,无从下手. 于是,前端web框架就需要我们去学习了,像学习后端SSM等框架一样,这次我们学习的前端web框架是BootStrap. Bootstrap: 概念:他是一个前端开发的框架,Bootstrap,来自Twitter,他基于前端三剑客,灵活简洁,使得前端web开发更加便捷 好处: 1.定义了很多CSS的样式和
bootstrap 学习
05-26
Bootstrap是一个开源的前端框架，由Twitter的设计师和工程师共同开发。它提供了一系列的CSS、JavaScript和HTML组件，可用于快速搭建现代化的响应式网站和Web应用程序。 学习Bootstrap可以帮助你更高效地开发Web应用程序，减少开发时间和成本。以下是一些学习Bootstrap的步骤： 1. 了解Bootstrap的基础知识：Bootstrap提供了一系列的CSS类和JavaScript插件，用于快速搭建响应式布局、表单、导航条等组件。你可以先了解Bootstrap的基础知识，包括网格系统、排版、颜色、图标等。 2. 阅读Bootstrap文档：Bootstrap官方文档提供了详细的说明和示例，可以帮助你更好地理解Bootstrap的用法和功能。你可以按照文档的顺序逐步学习Bootstrap的各个组件和插件，从而掌握其使用方法。 3. 实践Bootstrap的应用：通过实践应用，你可以更深入地理解Bootstrap的用法和功能。你可以从简单的网站布局开始，逐步尝试使用Bootstrap的各个组件和插件，例如导航条、表单、模态框等。 4. 学习Bootstrap的扩展库：Bootstrap有许多扩展库，例如Bootstrap Material Design、BootstrapVue等，可以进一步扩展Bootstrap的功能和应用范围。你可以学习这些扩展库，并尝试将其应用到你的项目中。 5. 查阅Bootstrap的案例：Bootstrap已经被广泛应用于各种类型的Web应用程序，你可以查阅一些Bootstrap的案例，例如Bootstrap官方网站、Bootstrap Expo等，了解Bootstrap在实际项目中的应用和优化方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值