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. ...
随机推荐
- linux下登陆用户的行为信息—w和who命令详解
查看用户的操作系统管理员若想知道某一时刻用户的行为,只需要输入命令w 即可,在SHELL终端中输入如下命令: [root@localhost ~]# w 可以看到执行w命令及显示结果. 命令信息含义上 ...
- Serializable 序列化为字符串 base64
工具类 Base64.java import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import ja ...
- Object类、instanceof
一.Object 1.所有类都默认继承至Object 2.两个常用的方法 2.1.toString:返回类的字符串描述,一般子类会重写用来打印属性 2.2.equals:默认比较两个对象的引用是否相同 ...
- [Windows驱动开发](二)基础知识——数据结构
本节主要介绍驱动开发的一些基础知识. 1. 驱动程序的基本组成 1.1. 最经常见到的数据结构 a. DRIVER_OBJECT驱动对象 // WDK中对驱动对象的定义 // 每个驱动程序都会有一个唯 ...
- 剑指OFFER之二维数组中的查找(九度OJ1384)
题目描述: 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项.斐波那契数列的定义如下: 输入: 输入可能包含多个测试样例,对于每个测试案例, 输入包括一个整数n(1< ...
- webservice 缓存机制
本文转载:http://blog.csdn.net/zhdd1234/article/details/4555472 WebService的缓存分为两种,一种是简单的输出缓存,一种是强大的数据缓存 一 ...
- Ribbon 窗体的 MDI 子窗体使用 TabbedMDIManager 切换时工具条闪屏问题的解决办法
补充说明: 此问题已经在新版本中解决(15.2.6),方法更加简单,只需要在 MDIChild 窗体的 Create 方法中,将 Ribbon 的 Visible 属性设置为 false 就可以了,且 ...
- 进程和cpu的相关知识和简单调优方案
进程就是一段执行的程序,每当一个程序执行时.对于操作系统本身来说,就创建了一个进程,而且分配了相应的资源.进程能够分为3个类别: 1.交互式进程(I/O) 2.批处理进程 (CPU) ...
- Android内存优化解决 资料和总结的经验分享
在前公司做一个图片处理的应用时, 项目交付的时候,客户的手机在运行应用的时候,一直在崩溃,而这个异常就是OutOfMemory的错误,简称为OOM, 搞得我们也是极其的崩溃,最后 ,我们是通过网上搜集 ...
- linux 下网站压力测试工具webbench
一直在用webbench ,这个linux下的网站压力测试工具.整理下. 笔记本装的ubuntu,其他linux系统也差不多. webbench 需要先安装 ctags,一个vim的阅读插件,可以直接 ...