Bootstrap之导航栏(2015年-05年-20日)
<nav class="navbar navbar-default" style="border-color: transparent;">
<div class="container">
<div class="navbar-header">
<!-- 自适应隐藏导航展开按钮 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="data:images/docker.png">
</a> </div>
<!--一定要加上id="bs-example-navbar-collapse-1"属性,不然小屏幕的情况下,li链接不可见 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top: 12px;">
<ul class="nav navbar-nav">
<li><a href="#"><strong>What is Docker?</strong></a></li>
<li><a href="#"><strong>Use Cases</strong></a></li>
<li><a href="#"><strong>Try It!</strong></a></li>
<li><a href="#"><strong>Install & Docs</strong></a></li>
<li><a href="#"><strong>Browse</strong></a></li>
</ul>
<!-- 搜索框-->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--/.collapse--> </div><!--/.container -->
</nav>
效果图如下:
适应大屏
适应小屏
Bootstrap之导航栏(2015年-05年-20日)的更多相关文章
- Bootstrap简单Demo(2015年05月-18日)
Bootstrap的简单使用 1.Bootstrap是什么? 这是Bootstrap官网上对它的描述:Bootstrap是最受欢迎的HTML.CSS和JS框架,用于开发响应式布局.移动设备优先的WEB ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- 2019-03-18 Python time 将2015年11月20日转换为2015-11-20
#ReportingDate = soup.select('body > div.main > div > div.ctr > div.recruit > ul > ...
- 【2019年05月20日】A股滚动市盈率PE历史新低排名
2010年01月01日 到 2019年05月20日 之间,滚动市盈率历史新低排名. 上市三年以上的公司, 2019年05月20日市盈率在300以下的公司. 1 - 阳光照明(SH600261) - 历 ...
- bootstrap完整导航栏
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Bootstrap,导航栏点击效果修复(补)
前言: 昨天晚上休息,忘记发博客了.对于学习这件是,还是需要坚持的.想想自建一个Jekyll博客模版还是很兴奋的,话不多说,看正文吧! 关于开发: 先看个Demo吧,点这里.你会发现,点击是没有效果 ...
- Bootstrap之Footer页尾布局(2015年05月28日)
直接上页尾部分的代码: <!--采用container-fluid,使得整个页尾的宽度为100%,并设置它的背景色--><footer class="container-f ...
- Bootstrap插件之Carousel轮播效果(2015年-05月-21日)
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...
- BootStrap 实现导航栏nav透明,nav子元素文字不透明
在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0. ...
随机推荐
- codeforces 630C Lucky Numbers
C. Lucky Numbers time limit per test 0.5 seconds memory limit per test 64 megabytes input standard i ...
- mac 下对 iterm 终端 设置代理
vi .profile export http_prox="http://xxxx:port" export https_proxy="http://xxxx:port& ...
- 第三方类AFNetworking
1.AFNetworking简介 AFNetworking是一个在iOS开发中使用非常多的轻量级网络开源库适用于iOS以及Mac OS X.它构建于在(Apple iOS开发文档) NSURLConn ...
- TypeScript学习笔记(五):接口
使用接口 在前面的笔记中我们知道可以使用Object Type来指定参数的属性,如下: function printLabel(labelledObj: {label: string}) { cons ...
- 第十五章 String讲解
package ch15; import java.util.Scanner; public class Test { public static void main(String[] args) { ...
- 推荐十款非常优秀的 HTML5 在线设计工具
网络有很多优秀的设计和开发工具可能大家都不知道,因此这篇文章就向设计师推荐十款优秀 HTML5 在线工具,这些工具能够帮助设计师们设计出更有创意的作品.随着 HTML5 技术的不断成熟,网络上涌现出越 ...
- 线程暴长~Quartz中创建Redis频繁后导致线程暴长
在最近项目开发过程中,在进行任务调度处理过程中,出现了一个问题,它的线程数暴长,从20多个可以到1000多个,如果你的服务器性能好的话,可以到10000多个,太恐怖了,就算你的服务再好,早晚有一天也会 ...
- GMT、UTC、PDT 时间是什么?Linux下如何调整时区
今天碰到一个时区配置问题,如果服务器时区配置不对,很可能在使用date相关函数时会出现莫名其妙的错误,现将相关时区说明及LINUX下调整时区方法记录如下,以做备忘. GMT GMT 是 Gree ...
- Get-ChildItem参数之 -Exclude,Filter,Recurse应用
$p = "D:\PSScript" gci $p -Exclude "UpdateLog" #排除子目录"UpdateLog",但是后面不 ...
- Java模拟登陆新浪微博抓取数据【转载】
package com.shiyimm.crawler.weibo; import java.io.FileNotFoundException; import java.io.FileReader; ...