Bootstrap（二）Bootstrap菜单、模态框、及其他样式类

最新推荐文章于 2024-05-02 14:26:53 发布
最新推荐文章于 2024-05-02 14:26:53 发布
阅读量2.1k 收藏 14
点赞数 2
文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/COOL66BOY/article/details/123518857
版权

文章目录

具体更多更详细的信息与使用方法访问中文官网：https://www.bootcss.com/
也要注意图片的响应式。

Bootstrap菜单（导航条）

  1. navbar 声明导航条
  2. navbar-default 声明默认的导航条样式
  3. navbar-inverse 声明黑色的导航条
  4. navbar-static-top 去掉导航条的圆角
  5. navbar-fixed-top 将导航条固定到顶部
  6. navbar-fixed-bottom 将导航条固定到底部
  7. navbar-header 声明logo容器
  8. navbar-brand 针对logo等固定内容的样式
  9. nav navbar-nav 定义导航条中的菜单
  10. navbar-form 定义导航条中的表单
  11. navbar-btn 定义导航条中的按钮
  12. navbar-text 定义导航条中的文本
  13. navbar-left 菜单靠左
  14. navbar-right 菜单靠右
  15. icon-bar 出现一条杠的样式类
    注：
    1.导航条包裹container容器
    2.属性：data-toggle和data-target来控制容器缩小到一定的大小后导航栏的样式。
    3.使用bootstrap字体图标时bootstrap的css文件和fonts文件一定要在一个文件夹里
    4.设置logo时，用一个div包起来将navbar-header样式类放在这个div上，否则改变可视窗口到一定程度时logo会消失

演示代码：

<!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>Document</title>
    <script src="/js/jquery-3.6.0.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        /* 去掉浏览器默认的样式 */
        .btn:active:focus,.btn:focus{
            outline: none;
        }
    </style>
</head>
<body>
    <!-- 定义导航条 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <!-- 定义logo -->
            <div class="navbar-header">
                <!-- 菜单显示与隐藏按钮 -->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#mymeun">
                    <!-- 按钮里面的杠 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class=" navbar-brand">LOGO</a>
            </div>
            <!-- 定义导航条菜单项 -->
            <!-- 设置视口变到一定程度大小时的菜单项的隐藏与显示 -->
            <div class="collapse navbar-collapse" id="mymeun">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>                
                    <li ><a href="#" >产品详情</a></li>
                    <li ><a href="#" >解决方案</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li> <a href="#">登录</a> </li>
                    <li><a href="#">注册</a> </li>
                </ul>
                <!-- 定义导航条表单 -->
                <div class="navbar-form navbar-right">
                    <div class="input-group">
                        <input type="text" name="" id="" class="form-control">
                        <div class="input-group-btn"><button class="btn btn-default form-control">
                            <span class="glyphicon glyphicon-search"></span>
                        </button></div> 
                    </div>
                </div>
            </div>
           
        </div>
    </div>
</body>
</html>

演示图：
请添加图片描述

bootstrap模态框

  1. modal 声明一个模态框
  2. modal-dialog 定义模态框的尺寸
  3. modal-lg 定义大尺寸模态框
  4. modal-sm 定义小尺寸模态框
  5. modal-header 模态框里面的头部
  6. modal-body 主体
  7. modal-footer 页脚
    注：
    1.modal里面包裹modal-dialog，modal-dialog里面包裹一个modal-content ，modal-content包裹modal-header、modal-body、modal-footer
    2.data-toggle和data-target让按钮能控制模态框弹出
    3.data-dismiss让取消按钮能够控制模态框隐藏

用法代码：

<!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>Document</title>
    <script src="/js/jquery-3.6.0.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <!-- 定义按钮容器 -->
    <div class="container">
        <div class="row">
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal01">弹出模态框</button>
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal02">弹出大模态框</button>
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal03">弹出小模态框</button>
        </div>
        <!-- 没定义大小的模态框 -->
    <div class="modal" id="modal01">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">提示框</div>
                <div class="modal-body">主要内容</div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 大模态框 -->
    <div class="modal" id="modal02">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">提示框</div>
                <div class="modal-body">主要内容</div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 小模态框 -->
    <div class="modal" id="modal03">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">提示框</div>
                <div class="modal-body">主要内容</div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
</html>

演示图：
请添加图片描述

路径导航

在一个带有层次的导航结构中标明当前页面的位置。

写法：

    <div class="container">
        <div class="row">
            <ol class="breadcrumb">
                <li> <a href="#">首页</a> </li>
                <li><a href="#">商品分类</a></li>
                <li class="active">数码软件</li>
            </ol>
        </div>

效果图：
在这里插入图片描述

巨幕

这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。
演示代码：

    <div class="jumbotron">
        <div class="container">
            <div class="row">
                这是一个巨幕
            </div>
        </div>
    </div>

演示图：
在这里插入图片描述

CSS一个补充-媒体查询

style中直接引入：当显示宽度不大于400px时，div该有的样式。

@media screen and (max-width: 400px) {
 
.wrapper div{
 
width: 100%;
 
}
 
}
码界索隆
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实例详解BootStrap的动态模态框及静态模态框
10-18
要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样。接下来通过实例代码给大家介绍BootStrap的动态模态框及静态模态框,需要的朋友可以参考下
bootstrap 菜单
weixin_33738555的博客
01-15 363
1.bootstrap图片 img-responsive 声明响应式图片 2.bootstrap 字体图标 通过字体代替图标，font文件夹需要和css文件夹在同一目录 3.bootst导航条 （1）navbar 声明导航条（2）navbar-default 声明默认的导航条样式（3）navbar-inverse 声明反白的导航条样式（4）navbar-static-top去掉导航条的圆角（5）n...
【前端素材】bootstrap实现的几种通用的后台管理系统（附带源码）
m0_46013789的博客
02-20 882
应用型的后台管理系统是一种用于管理应用程序、网站或系统的后台界面，通常由开发人员或管理员使用。这类系统的主要功能是帮助管理者有效地监控、维护和控制应用程序的运行情况，同时提供必要的工具和功能来管理用户、数据、内容以及系统设置等方面。
Bootstrap系列之下拉菜单（Dropdowns）
热门推荐
老__L的博客
06-06 1万+
使用Bootstrap下拉插件切换上下文覆盖来显示链接列表和更多内容。下拉列表是可切换的，上下文覆盖显示链接列表和更多。它们与包含的Bootstrap下拉式JavaScript插件进行交互。它们是通过点击而不是悬停来切换的;这是一个有意的设计决策。下拉框建立在第三方库Popper上，它提供动态定位和视口检测。请确保在Bootstrap JavaScript之前包含或使用包含Popper的 / 。Popper不用于定位导航栏中的下拉框，因为动态定位不是必需的。如果您从源代码构建我们的JavaScript，它需
神奇的Bootstrap 菜单 导航 全面分析
07-29 1684
转自：http://blog.csdn.net/smartbetter/article/details/52056272 本篇将主要介绍Bootstrap的菜单、导航。 本篇开始将引入javascript相关文件，如下： script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js">script> scrip
Bootstrap的导航菜单组件相关知识
昊虹AI笔记
10-15 740
Bootstrap的导航菜单组件相关知识
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
Bootstrap 菜单
soindy
03-22 1712
基本用法小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件。在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中，我们统一调用压缩好的“bootstrap.min.js”文件：<scri
bootstrap中的导航菜单
weixin_42289273的博客
06-15 376
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap中的导航元素</title> {% load staticfiles %} <link rel="stylesheet" href="{% static 'learn/css/bootstrap.css' %}"> <sc.
bootstrap导航菜单
weixin_34195142的博客
05-28 149
<!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, i...
BootstrapBlazor实战 Menu 导航菜单使用(1)
alex_zoucn的博客
04-25 1329
实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后台维护页面
5个不同样式bootstrap导航菜单模板
11-13
bootstrap,导航,菜单,HTML5,模板.
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
08-29
主要介绍了BootStrap点击保存后实现模态框自动关闭的思路(模态框),需要的朋友可以参考下
bootstrap模态框关闭后清除模态框的数据方法
10-18
今天小编就为大家分享一篇bootstrap模态框关闭后清除模态框的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Bootstrap 模态框（Modal）带参数传值实例
08-29
模态框（Modal）是覆盖在父窗体上的子窗体。下面通过本文给大家介绍Bootstrap 模态框（Modal）带参数传值实例代码，需要的朋友参考下吧
BootStrap 模态框实现刷新网页并关闭功能
08-31
主要介绍了BootStrap 模态框实现刷新网页并关闭的功能，实现方法简单易懂,需要的朋友可以参考下
element-ui的bug记录
nick_zhang的博客
04-29 514
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 1422
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 321
createWs("测试数据", (res) => {
怎么利用bootstrap第三方框架写样式
06-06
Bootstrap是一个流行的前端框架，它提供了大量的CSS样式和JavaScript插件，可以帮助我们快速搭建网站和应用程序。下面是使用Bootstrap编写样式的一些基本步骤： 1. 引入Bootstrap的CSS和JavaScript文件。可以在网上下载Bootstrap的文件，也可以使用CDN来引入。 2. 在HTML文件中使用Bootstrap的CSS类来设置样式。Bootstrap提供了大量的CSS类，可以使用这些类来设置按钮、表格、表单等元素的样式。例如，可以使用 ".btn" 类来设置按钮的样式，使用 ".table" 类来设置表格的样式。 3. 使用Bootstrap的JavaScript插件来实现交互效果。Bootstrap提供了很多JavaScript插件，例如轮播、下拉菜单、模态框等，可以使用这些插件来实现网站和应用程序的交互效果。 4. 自定义样式。如果Bootstrap提供的样式不能满足需求，可以使用自定义样式来覆盖Bootstrap的样式。可以在自己的CSS文件中定义样式，然后在HTML文件中引入。 总之，使用Bootstrap可以大大提高前端开发的效率和质量，但是也需要注意不要滥用Bootstrap的样式，要根据实际需求来选择合适的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值