Bootstrap 页面元素隐藏与显示

最新推荐文章于 2022-05-02 15:32:29 发布
最新推荐文章于 2022-05-02 15:32:29 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： Bootstrap 框架
原文链接：https://blog.csdn.net/WuLex
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>课室单元::日历</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./assets/vendor/bootstrap/css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="./assets/scout/css/bootswatch.min.css">
    <link rel="stylesheet" href="./assets/scout/css/styles.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="asset/html5shiv/html5shiv.js"></script>
        <script src="asset/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <header>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a href="" class="navbar-brand">课室部</a>
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse" id="navbar-main">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">欢迎</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Section <span class="caret"></span></a>
                            <ul class="dropdown-menu" aria-labelledby="themes">
                                <li>
                                    <a href="https://sabazyo.github.io/baladin.html">Baladin</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="news.html">新闻</a>
                        </li>
                        <li>
                            <a href="photos.html">Photos</a>
                        </li>
                        <li class="active">
                            <a href="agenda.html">Agenda</a>
                        </li>
                        <li>
                            <a href="contact.html">Contacte</a>
                        </li>
                        <li>
                            <a href="document.html">Document</a>
                        </li>
                        <li>
                            <a href="recrutement.html">Recrutement</a>
                        </li>
                        <li>
                            <a href="inscription.html">Inscription</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <section class="container page-header">
        <div class="row">
            <h1><span class="glyphicon glyphicon-calendar hidden-xs"></span> Agenda</h1>
            <section>
                <div class="col-sm-1 hidden-xs">
                    <h2>
                        <img src="./assets/scout/img/logos/logo_scouts.jpg" alt="unité" />
                    </h2>
                </div>
                <div class="col-xs-12 col-sm-11">
                    <h2>
                        <a class="unite" href="new-unite-fin-de-camps.html">单位</a>
                    </h2>
                    <table class="table table-striped">
                        <tr>
                            <th>Date</th>
                            <th>Type</th>
                            <th>Remarque</th>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">06/09/14 14H - 18H</td>
                            <td class="hidden-xs">6 septembre 2014 de 14H à 18H</td>
                            <td>Reunion</td>
                            <td>.</td>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">13/09/14</td>
                            <td class="hidden-xs">13 septembre 2014</td>
                            <td>Relache</td>
                            <td></td>
                        </tr>
                        <tr class="success">
                            <td class="hidden-sm hidden-md hidden-lg">20/09/14 14H - 18H</td>
                            <td class="hidden-xs">20 septembre 2014 de 14H à 18H</td>
                            <td>Reunion</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">27/09/14</td>
                            <td class="hidden-xs">27 septembre 2014 de 14H à 18H</td>
                            <td>Relache</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">04/10/14 14H - 05/10/14 18H</td>
                            <td class="hidden-xs">6 septembre 2014 de 14H au 5 octobre 2014 à 18H</td>
                            <td>Hike</td>
                            <td>普雷沃瓦（Prévoire）5欧元</td>
                        </tr>
                    </table>
                    <hr />
                </div>
            </section>
            <section>
                <div class="col-sm-1 hidden-xs">
                    <h2>
                        <img src="./assets/scout/img/logos/logo_baladins.jpg" alt="baladins" />
                    </h2>
                </div>
                <div class="col-xs-12 col-sm-11">
                    <h2>
                        <a class="baladin" href="#">歌谣</a>
                    </h2>
                    <table class="table table-striped">
                        <tr>
                            <th>Date</th>
                            <th>Type</th>
                            <th>Remarque</th>
                        </tr>
                        <tr>
                            <!--小屏幕
                            中等屏幕
                            大屏幕  隐藏-->
                            <td class="hidden-sm hidden-md hidden-lg">06/09/14 14H - 18H</td>
                            <td class="hidden-xs">6 septembre 2014 de 14H à 18H</td>
                            <td>Reunion</td>
                            <td>.</td>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">13/09/14</td>
                            <td class="hidden-xs">13 septembre 2014</td>
                            <td>Relache</td>
                            <td></td>
                        </tr>
                        <tr class="success">
                            <!--小屏幕
                            中等屏幕
                            大屏幕  隐藏-->
                            <td class="hidden-sm hidden-md hidden-lg">20/09/14 14H - 18H</td>
                            <!--超小屏幕 隐藏-->
                            <td class="hidden-xs">20 septembre 2014 de 14H à 18H</td>
                            <td>Reunion</td>
                            <td></td>
                        </tr>
                        <tr>
                            <!--小屏幕
                                中等屏幕
                                大屏幕  隐藏-->
                            <td class="hidden-sm hidden-md hidden-lg">27/09/14</td>
                            <!--超小屏幕 隐藏-->
                            <td class="hidden-xs">27 septembre 2014 de 14H à 18H</td>
                            <td>Relache</td>
                            <td></td>
                        </tr>
                        <tr>
                            <!--小屏幕
                            中等屏幕
                            大屏幕  隐藏-->
                            <td class="hidden-sm hidden-md hidden-lg">04/10/14 14H - 05/10/14 18H</td>
                            <!--超小屏幕 隐藏-->
                            <td class="hidden-xs">6 septembre 2014 de 14H au 5 octobre 2014 à 18H</td>
                            <td>Hike</td>
                            <td>普雷沃瓦（Prévoire）5欧元</td>
                        </tr>
                    </table>
                    <hr />
                </div>
            </section>
            <section>
                <div class="col-sm-1 hidden-xs">
                    <h2>
                        <img src="./assets/scout/img/logos/logo_louveteaux.jpg" alt="louveteaux" />
                    </h2>
                </div>
                <div class="col-sm-11 col-xs-12">
                    <h2>
                        <a class="louveteau" href="#">小熊</a>
                    </h2>
                    <table class="table table-striped">
                        <tr>
                            <th>Date</th>
                            <th>Type</th>
                            <th>Remarque</th>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">06/09/14 14H - 18H</td>
                            <td class="hidden-xs">6 septembre 2014 de 14H à 18H</td>
                            <td>Reunion</td>
                            <td>.</td>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">13/09/14</td>
                            <td class="hidden-xs">13 septembre 2014</td>
                            <td>Relache</td>
                            <td></td>
                        </tr>
                        <tr class="success">
                            <td class="hidden-sm hidden-md hidden-lg">20/09/14 14H - 18H</td>
                            <td class="hidden-xs">20 septembre 2014 de 14H à 18H</td>
                            <td>Reunion</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">27/09/14</td>
                            <td class="hidden-xs">27 septembre 2014 de 14H à 18H</td>
                            <td>Relache</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">04/10/14 14H - 05/10/14 18H</td>
                            <td class="hidden-xs">6 septembre 2014 de 14H au 5 octobre 2014 à 18H</td>
                            <td>Hike</td>
                            <td>Prévoire 5€ pour le hike</td>
                        </tr>
                    </table>
                    <hr />
                </div>
            </section>
            <section>
                <div class="col-sm-1 hidden-xs">
                    <h2>
                        <img src="./assets/scout/img/logos/logo_eclaireurs.jpg" alt="eclaireurs" />
                    </h2>
                </div>
                <div class="col-sm-11 col-xs-12">
                    <h2>
                        <a class="eclaireur" href="#">侦察员</a>
                    </h2>
                    <table class="table table-striped">
                        <tr>
                            <th>Date</th>
                            <th>Type</th>
                            <th>Remarque</th>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">06/09/14 14H - 18H</td>
                            <td class="hidden-xs">6 septembre 2014 de 14H à 18H</td>
                            <td>Reunion</td>
                            <td>.</td>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">13/09/14</td>
                            <td class="hidden-xs">13 septembre 2014</td>
                            <td>Relache</td>
                            <td></td>
                        </tr>
                        <tr class="success">
                            <td class="hidden-sm hidden-md hidden-lg">20/09/14 14H - 18H</td>
                            <td class="hidden-xs">20 septembre 2014 de 14H à 18H</td>
                            <td>Reunion</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">27/09/14</td>
                            <td class="hidden-xs">27 septembre 2014 de 14H à 18H</td>
                            <td>Relache</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="hidden-sm hidden-md hidden-lg">04/10/14 14H - 05/10/14 18H</td>
                            <td class="hidden-xs">6 septembre 2014 de 14H au 5 octobre 2014 à 18H</td>
                            <td>Hike</td>
                            <td>普雷沃瓦（Prévoire）5欧元</td>
                        </tr>
                    </table>
                </div>
                <p class="text-center">您的电子日历的Caldav链接: http://caldav.
<p>
            </section>
        </div>
    </section>
    <footer>
        <p class="text-center">sabazyo-课程单位</p>
    </footer>
    <script src="./assets/vendor/jquery/jquery-2.1.0.min.js"></script>
    <script src="./assets/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="./assets/scout/js/bootswatch.js"></script>
</body>
</html>

如图:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

地址

下载链接

风神.NET跨平台
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap页面缩小导航收缩和展开
qq_38670879的博客
06-22 5345
导航使用ulli标签时，当页面缩小时，菜单收缩 div class="navbar navbar-default" role="navigation"> 　div class="navbar-header"> 　 a href="##" class="navbar-brand">慕课网a> 　div> ul class="nav navbar-nav">
在bootstrap中窗口缩小到一定程度后，点击某一元素实现导航栏的显隐藏
weixin_43757266的博客
11-23 6742
先贴上一个效果图 刚开始是这样：在大屏幕下 和在小屏幕下的效果：（对MEAN 进行操作，在大屏幕中，MENU是隐藏起来的，只有在小屏幕找那个才会有显示！） 当小屏幕下点击 MEAN 的时候，效果如下：导航栏会出现，再次点击的时候导航栏会消失。 实现原理？ 简单说一下自己的想法。 先贴上代码：css 我只列出重要的一部分。 &lt;div class="navbar navbar-defa...
Bootstrap元素的显示与隐藏
jwz934738949的博客
07-03 2461
在Bootstrap中，为了更好的适配移动设备，需要对页面中不重要的内容设置元素的显示与隐藏 当在大屏幕中，可以将那些并不重要的组件进行显示，而在小屏幕中，为了节省空间，需要对一些元素进行隐藏 为元素添加类d-none，将在所有设备中隐藏该元素，d-*-none，将为特定尺寸的屏幕进行隐藏元素。例如：d-sm-none，将在小屏幕中隐藏元素 但是需要注意的是，Bootstrap默认移动端优先，也就是会从最小的设备开始适配，然后将所有大于的设备也进行适配 当设置了小屏幕隐藏之后，默认小屏幕以及之上的所有屏幕.
学习 Bootstrap 5 之 Display 和 Float
qq_37354060的博客
01-17 1094
学习 Bootstrap 5 之 显示属性 和 浮动流定位机制
html 块 隐藏 显示,bootstrap如何显示或隐藏内容？
weixin_33622043的博客
06-03 494
bootstrap如何显示或隐藏内容？下面本篇文章给大家介绍一下Bootstrap显示或隐藏内容的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。显示或隐藏内容Bootstrap3 中，.show和.hidden类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)，但是，这些类只对块级元素起作用，对行内级元素不起作用。如：......跟快速浮动的做法一样，.show和.hi...
Bootstrap笔记(十六) 常用类别 - 显示层级与隐藏元素
XI_MILU的博客
09-16 897
常用类别 - 显示层级显示层级隐藏元素 显示层级 Bootstrap提供了一些类别来变更HTML元素的CSS的display属性，而且这些类别具有响应式特点，其命名形式如下: xs的层级类别: .d - { 设定值 } sm、md、lg、xl、xxl的层级类别: .d - { 断点 } - { 设定值 } 设定值如下: none: 不显示。 inline: 行内层级 (不换行)。 block: 区块层级 (换行)。 inline-block: 不换行，但可以设定宽度、高度、padding与ma
bootstrap-table：列的显示与隐藏以及动态加载列(自定义加载表头)
xu_xu_0924的博客
09-23 3844
var head_data = [] // 初始化表格 getColumns() function getColumns() { // 加载动态表格 $.ajax({ url: "json/head.json", type: 'get', dataType: "json", async: false, success: function(data) { head_data = data var options = { ...
Bootstrap显示隐藏密码输入代码
04-07
2. **CSS样式**：为了美化这个功能，可以添加一些Bootstrap样式，使按钮与表单元素保持一致。 ```css #togglePassword { float: right; margin-top: -34px; margin-right: 10px; } ``` 3. **jQuery实现**：...
Bootstrap显示隐藏密码输入特效代码
03-20
总的来说，Bootstrap显示隐藏密码输入特效的实现是一个结合了HTML、CSS和JavaScript的实用功能，它增强了用户在输入敏感信息时的交互体验。通过理解并运用这些技术，开发者可以创建更加用户友好的Web应用。
Bootstrap顶部浮动导航菜单页面滚动显示隐藏.zip
04-12
在本项目中，我们关注的是"Bootstrap顶部浮动导航菜单页面滚动显示隐藏"这一功能。这个功能通常用于创建响应式的网页，使得在页面滚动时，导航栏能够智能地根据用户的滚动行为进行显示或隐藏。 在`index-bs3.html`...
bootstrap显示DIV
09-03
bootstrap附带使用说明 关于显示框的使用说明
bootstrap页面.rar
09-24
3. **隐藏与显示元素**：在描述中提到，Bootstrap允许根据页面大小控制元素的隐藏与显示。这是通过使用`.visible-*`和`.hidden-*`（在较新版本中是`.d-*`）类实现的。例如，`.visible-sm`只在小屏幕设备上显示元素，...
Bootstrap3隐藏左侧边栏菜单代码
06-05
在“Bootstrap3隐藏滑动左侧边栏菜单代码”中，我们探讨的是如何在网页设计中实现一个可隐藏的侧边栏菜单，这个功能尤其适用于移动设备，因为它可以节省屏幕空间并提供更好的用户体验。 首先，我们要理解Bootstrap3...
重写页面中form中的action（隐藏页面地址）
昭阳的专栏
11-11 2200
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; namespace MyAction { /// /// 重新页面中form中的action（用来隐藏页面地址） /// public class MyPage : Page { protected override
Bootstrap 一篇就够 快速入门&使用（中文文档）
m0_60786924的博客
05-02 2万+
目录 一、Bootstrap简介 什么是 Bootstrap？ 历史 为什么使用 Bootstrap？ Bootstrap 包的内容 在线实例 Bootstrap 实例 更多实例 Bootstrap 实例2 二、Bootstrap环境安装 下载 Bootstrap 文件结构 预编译的 Bootstrap Bootstrap 源代码 HTML 模板 实例 实例 实例 Staticfile CDN 推荐 三、关于Boostrap的中文文档 布局 Container..
表格插件bootstrapTable中隐藏和显示某列及一些小注意点
热门推荐
nb7474的博客
02-09 6万+
html代码：<table id="docDateTable" class="table table-hover table-bordered" style="color: #000000"> <thead style="background-color: white"> <tr> <th data-field="name" data-valign="
bootstrap Table 隐藏表单属性，以及格式时间的写法
走过程序员的路
11-21 5931
$('#querylist').bootstrap Table({     columns: [{         checkbox: true     }, {         field: 'id',         title: 'ID',         visible: false     },{         title: '序号',         formatt
bootstrap 使用table表单布局 隐藏显示行
weixin_33911824的博客
08-17 1288
为什么80%的码农都做不了架构师？>>> ...
三菱PLC习题集(填空、判断、选择题).doc
最新发布
07-02
plc
bootstrap响应式页面设计
11-16
3. 使用Bootstrap的响应式工具来隐藏、显示或重新排列内容。例如，以下代码将在较小的屏幕上隐藏一个元素： ```html <div class="hidden-sm">This element is hidden on small screens. ``` 在这个例子中，`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值