nav

Bootstrap-navbar使用

帅比萌擦擦* 提交于 2019-12-01 08:57:22
bootstrap 导航主要有三种: 胶囊式导航 面包屑导航 头部导航 胶囊式和面包屑的本质是 列表 . 胶囊式导航使用时在列表的基础上添加 .nav .nav-pill 类 若想使用纵向导航再加 .nav-stacked 例如: <ul class="nav nav-pills nav-stacked">...</ul> 面包屑导航使用时在列表的基础上添加 .breadcrumb 类即可 例如: <ol class="breadcrumb">...</ol> 这儿主要记录一下头部导航 先上一个demo 先看一下效果 这个是折叠后的: 然后是完整代码: <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"

Vue之路由跳转 传参 aixos 和cookie

眉间皱痕 提交于 2019-12-01 07:42:09
  一.路由跳转   1.1 项目的初始化   vue create m-proj >>>创建vue项目   精简vue项目的   views 视图 About(基本是删除的) Home.(可以作为主业去设置 搭建一些基本的样式)   scr 下创建一个css 作为全局的样式 设置   最后将设置好的全局样式 在mian.js 文件中 导入 作为 项目的入口 类似执行文件(start.py)   基础的完成了      二.路由传参的几种方法     2.1 导航栏的显示设置      <template> <div class="nav"> <ul><li :class="{active: currentPage==='/'}"> <!--<li @click="changePage('/')" :class="{active: currentPage==='/'}">--> <!--<a href="/" >主页</a>--> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage==='/course'}"> <!--<li @click="changePage('/')" :class="{active: currentPage==='/'}">--> <!--<a href="

vue项目环境搭建与组件介绍

流过昼夜 提交于 2019-12-01 03:01:31
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm vue ~~ django:vue是用来搭建vue前端项目的 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架 >: cnpm install -g @vue/cli 注:2或3终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤 npm cache clean --force """ Vue项目创建 1) 进入存放项目的目录 >: cd *** 2) 创建项目 >: vue create 项目名 3) 项目初始化 空格选择,回车确认 pycharm配置并启动vue项目 1) 用pycharm打开vue项目 2) 添加配置npm启动 vue项目目录结构分析 ├── v-proj | ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └──

Rotate image on toggle with jQuery

亡梦爱人 提交于 2019-11-30 21:17:27
Site in question: http://mtthwbsh.com I'm attempting to create a collapsable nav where when toggled, the arrow points up (and down when hidden). I've been reading up on rotating images with jQuery, and have found this to be my best resource: Rotate Image(s) OnClick With jQuery? I understand what's happening here, but am having a tough time visualizing it with my markup. My jQuery for my collapsing nav is as follows: <script type="text/javascript"> $(document).ready(function(){ /* toggle nav */ $("#menu-icon").on("click", function(){ $(".nav").slideToggle(); $(this).toggleClass("active"); }); }

Rotate image on toggle with jQuery

你。 提交于 2019-11-30 17:11:47
问题 Site in question: http://mtthwbsh.com I'm attempting to create a collapsable nav where when toggled, the arrow points up (and down when hidden). I've been reading up on rotating images with jQuery, and have found this to be my best resource: Rotate Image(s) OnClick With jQuery? I understand what's happening here, but am having a tough time visualizing it with my markup. My jQuery for my collapsing nav is as follows: <script type="text/javascript"> $(document).ready(function(){ /* toggle nav *

js特效-下拉菜单

给你一囗甜甜゛ 提交于 2019-11-30 09:35:18
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul, li { list-style: none; padding: 0; margin: 0; cursor: pointer; } a { text-decoration: none; } .nav { width: 420px; font-size: 12px; } .nav>li { width: 100px; display: inline-block; position: relative; text-align: center; } .nav>li>a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav>li>a:hover { background-color: #eee; } .nav ul { display:

VUE创建项目

亡梦爱人 提交于 2019-11-30 07:06:52
Vue Cli项目搭建 vue项目需要自建服务器:node 什么是node: 用C++语言编写,用来运行JavaScript语言 node可以为前端项目提供server (包含了socket) 一、环境搭建 1、官网下载安装包,傻瓜式安装: https://nodejs.org/zh-cn/ 2、装完了后在cmd输入node即可启动一个命令行交互环境,运行javascript代码 3、可以更换国内源,加速下载:npm install -g cnpm --registry=https://registry.npm.taobao.org 在更换源后,所有的npm命令都可以替换为cnpm。 改完后npm的源还是国外的源,cnpm的源是淘宝的源。 4、安装vue cli环境:脚手架,命令行快速创建项目 cnpm install -g @vue/cli 5、安装脚手架报错的时候,需要清空缓存处理 npm cache clean --force 二、项目创建 以管理员的身份运行cmd ,否则可能出现一些不必要的麻烦 首先cd切换到目标目录 执行:vue create 项目名 选择自定义方式创建项目,选取Router, Vuex插件 选择第二个进入自定义配置: 5. 执行时,会提示下载源,选择淘宝镜像即可。(有大写的选大写,大写是建议的选项) 6. 具体配置:上下键切换,空格键选择

模板字符串的使用

 ̄綄美尐妖づ 提交于 2019-11-30 03:32:57
var items = [{ key:'index', text:'首页' },{ key:'serve', text:'售后服务' },{ key:'introduce', text:'企业介绍' },{ key:'about', text:'关于我们' },{ key:'classic', text:'经典系列' },{ key:'contact', text:'联系我们' },{ key:'discover', text:'发现更多' },{ key:'help', text:'帮助' }] let arr = []; items.forEach(function(item){ arr.push(`<li class="nav-li">${item.text}</li>`); }); let nav = document.createElement('nav'); nav.innerHTML = arr.join(''); let header = document.getElementById('ljx-header'); header.appendChild(nav); 模板字符串的使用:使用` `将要添加的html元素包裹起来。 使用${ }包裹变量,最后被生成的字符串中${ }所占的位置会被替换为 变量的值,所以${ }还起占位符的作用。 来源: https:/

HTML5 nav element vs. role=“navigation”

℡╲_俬逩灬. 提交于 2019-11-29 22:06:08
Do all of the following carry the same semantic meaning? If not please explain your answer. 1. <nav> <ul> <li><a href="#">link</li> <li><a href="#">link</li> <li><a href="#">link</li> <li><a href="#">link</li> </ul> </nav> 2. <div role="navigation"> <ul> <li><a href="#">link</li> <li><a href="#">link</li> <li><a href="#">link</li> <li><a href="#">link</li> </ul> </div> 3. <ul role="navigation"> <! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics navigation is not an allowed value of role on ul --> <li><a href="#">link</li> <li><a href="#">link</li> <li><a href="#">link</li> <li><a

Bootstrap 4.0 - Two NavBars that collapse into one toggle [duplicate]

主宰稳场 提交于 2019-11-29 18:52:10
This question already has an answer here: Bootstrap 4 collapsing two navbars into one toggle button 2 answers Wondering if it's possible to have two navigation bars displaying on separate rows on desktop, but have the two navbars collapse into one toggler on tablet and mobile. Essentially, I want the top navbar to contain the brand, and then four or five menu items, while the second navbar would not contain a brand but instead just four or five more navigation elements. I would like these navigation bars to display on their own rows on desktop, but when the viewport shrinks to tablet or mobile