Bootstrap(三)

news2024/12/29 8:02:40

目录:

(1)bootstrap响应式工具

(2)bootstrap实例导航


(1)bootstrap响应式工具

class加属性:

visible-xs:隐藏显示,当屏幕宽度小于等于xs的时候显示、

 

visible-sm:隐藏显示,当屏幕宽度小于等于ms的时候显示、

...

 

 

 

hidden-xs:当屏幕达到指定的宽度隐藏起来

hidden-ms

...

达到768隐藏起来:

 

 

(2)bootstrap实例导航

点击基本模板:

 

 

创建html页面,把上面模板代码复制进去:加代码这是移动端需要添加的

 

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

引入css js 

 

 点击组件,选择导航条

复制导航条代码: 

 

 替换选中的代码:

 

 

点击反色导航条:

修改class: 

 

它是一个流体容器,去掉:fluid 

 

修改Brand:

 

删除form、ul:

 

 

 

修改:对应的汉字

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/20860.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何使用轻量应用服务器搭建Typecho个人博客系统?

之前有写过WordPress搭建博客的教程&#xff1a;如何使用轻量应用服务器搭建WordPress个人博客 有的小伙伴感觉WordPress比较臃肿&#xff0c;有没有比较简洁的博客系统呢&#xff0c;今天就把Typecho搭建个人博客的操作方法分享给大家&#xff0c;需要的小伙伴可以参考以下。 …

注解的使用

1. 注解概述 1.1 注解概述、作用 Java 注解&#xff08;Annotation&#xff09;又称 Java 标注&#xff0c;是 JDK5.0 引入的一种注释机制。Java 语言中的类、构造器、方法、成员变量、参数等都可以被注解进行标注。 1.2 注解的作用是什么 2. 自定义注解 2.1 自定义注解 —…

大数据之Hive基本查询

文章目录前言一、Hive基本查询&#xff08;一&#xff09;普通查询&#xff08;二&#xff09;Join查询&#xff08;三&#xff09;排序查询总结前言 #博学谷IT学习技术支持# 这一次主要介绍Hive的基本查询以及相关函数&#xff0c;Hive的查询以及函数用法与MySQL不尽相同&…

自动化立体仓库系统实训

实训目的 理解被控对象&#xff0c;控制系统关系&#xff1b;逻辑流程任务综合训练&#xff1b;仓储智能管理实现&#xff1b;工业系统整体调试&#xff1b; 实训设备 虚拟仿真被控对象&#xff1b;S7-300控制器及实验台接口&#xff1b;DAQ信号板卡及继电器模块&#xff1b; 设…

基于划分的方法、K-均值算法、K-medoids、K-prototype(机器学习)

目录 基于划分的方法 K-均值算法 k-均值算法聚类步骤如下&#xff1a; K-均值算法优缺点 K-medoids算法 K-prototype算法 基于划分的方法 1、基于划分的方法是简单、常用的一种聚类方法&#xff1b; 2、通过将对象划分为互斥的簇进行聚类&#xff0c; 每个对象属于且仅属…

Python学习基础笔记九——集合

集合&#xff1a;可变的数据结构&#xff0c;元素必须是不可变的数据类型&#xff0c;无序&#xff0c;不重复&#xff08;去重&#xff09;。 数据集的方法&#xff1a; 方法功能S.add(tom)增加一个元素S.update(abc)增加一个可迭代元素&#xff0c;每个元素都分别添加进去S.…

[附源码]java毕业设计网上博物馆设计

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

《计算机视觉技术与应用》-----第五章 边缘和轮廓

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…

【人工智能】MindSpore Hub

目录 前言 一、什么是MindSpore Hub 1.简单介绍 2.MindSpore Hub包含功能 3.MindSpore Hub使用场景 二、安装MindSpore Hub 1.确认系统环境信息 2.安装 3.下载源码 4.进行验证 三、加载模型 1.介绍 2.推理验证 3.迁移学习 四、模型发布 前言 MindSpore着重提升易…

营造激发自驱力注重培养学习力的想法一

目录背景过程第一节&#xff1a;第二节&#xff1a;第三节&#xff1a;总结升华背景 小编做的是教育类公司&#xff0c;其实无论是做公司的产品&#xff0c;还是对于公司团队人员的培养&#xff0c;都需要去思考教育这件事&#xff0c;尤其是激发自驱力培养学习力&#xff1b;…

常用的框架07-消息中间件-RabbitMQ

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录1.消息中间件概述1.1 为什么学习消息队列1.2 什么是消息中间件1.3 消息队列应用场景1.3.1 异步处理1.3.2 应用程序解耦合1.3.3 削峰填谷1.3.4 什么是QPS1.3.5 什么是…

servlet和vue的增删改查

1.servlet实现步骤 Servlet->新增 servlet获取请求参数&#xff0c;将参数转化为对象&#xff0c;调用service WebServlet("/addService") public class addAllService extends HttpServlet {private BrandService brandService new BrandServiceimpl() ;Over…

云计算之虚拟化技术学习(KVM/Xen/Hyper-V/VMware)

文章目录虚拟化技术什么是虚拟化服务器虚拟化cpu的虚拟化内存虚拟化管理硬盘的虚拟化网络虚拟化IO虚拟化Intel虚拟化技术主流的虚拟化技术虚拟化技术对比XenKVMHyper-VVMware ESX/ESXi虚拟化服务平台Libvirt基于KVM的虚拟化服务平台虚拟化技术 什么是虚拟化 虚拟化是云计算的…

最长公共子序列长度

求两个字符串的最长公共子序列长度。 输入格式: 输入长度≤100的两个字符串。 输出格式: 输出两个字符串的最长公共子序列长度。 输入样例1: ABCBDAB BDCABA输出样例1: 4输入样例2: ABACDEF PGHIK输出样例2: 0 (1条消息) HBU训练营【动态规划DP】——最长公共子序列长…

力扣(LeetCode)799. 香槟塔(C++)

动态规划 设 iii 是行 , jjj 是列 &#xff0c; f[i][j]f[i][j]f[i][j] 表示经过杯子的酒量 &#xff0c;初始 f[0][0]pouredf[0][0]pouredf[0][0]poured &#xff0c; 为了理解&#xff0c;当做每个杯子有无限容量。 当香槟溢出时&#xff0c;f[i][j]f[i][j]f[i][j] 保留自己的…

放大镜-第12届蓝桥杯Scratch选拔赛真题精选

[导读]&#xff1a;超平老师计划推出Scratch蓝桥杯真题解析100讲&#xff0c;这是超平老师解读Scratch蓝桥真题系列的第80讲。 蓝桥杯选拔赛每一届都要举行4~5次&#xff0c;和省赛、国赛相比&#xff0c;题目要简单不少&#xff0c;再加上篇幅有限&#xff0c;因此我精挑细选…

SpringCloud系列(一)Eureka 注册中心

本文主要介绍 Eureka 用来做什么&#xff1f; 如何搭建以及测试&#xff1b;  微服务框架区分于普通的单体架构项目&#xff0c;它是一种经过良好架构设计的分布式架构方案&#xff0c;根据业务功能对系统进行拆分&#xff0c;将每个业务模块都当做是一个独立的项目进行开发&a…

session共享问题及四种解决方案-前端存储、session的复制 、session粘性、后端存储(Mysql、Redis等)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a; 才疏学浅的木子 &#x1f647;‍♂️ 本人也在学习阶段如若发现问题&#xff0c;请告知非常感谢 &#x1f647;‍♂️ &#x1f4d2; 本文来自专栏&#xff1a; 常用工具类以及常见问题处理方法 &#x1f308; 每日一语&…

Alos PALSAR 12.5米免费DEM下载教程

Alos PALSAR 12.5米免费DEM下载教程ALOS 12.5米数据简介2. 下载2.1 搜索数据2.2 下载数据3. 使用数据ALOS 12.5米数据简介 ALOS 12.5m DEM 数据&#xff0c;是使用ALOS&#xff08;Advanced Land Observing Satellite&#xff09;卫星相控阵型L波段合成孔径雷达&#xff08;PA…

SpringBoot + EasyExcel 实现表格数据导入

1. 准备 导入依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.0.5</version><scope>compile</scope> </dependency><dependency><groupId>org.proj…