导航组件:

导航条组件:

  导航条代码:

<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">标题</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
<form action="#" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default">提交</button>
</div>
</div>
</form>
<button class="btn btn-default navbar-btn navbar-left">asdasd</button>
<p class="navbar-text">我是一个文本</p>
</div>
</nav>

Bootstrap 学习笔记3 输入框和导航组件的更多相关文章

  1. Bootstrap学习笔记(4)--导航栏

    相关类: nav, nav-pills, nav-tags, nav-stacked ul里使用,导航格胶囊,方片外观,堆叠外观 navbar, navbar-header, navbar-brand ...

  2. Bootstrap学习笔记(6)--导航居中

    说明:没找到好办法 <div class="row"> <ul class="nav nav-pills col-md-offset-4"&g ...

  3. 第二百三十八节,Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文 ...

  4. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  5. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  6. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  7. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  8. Windows phone 8 学习笔记(8) 定位地图导航

    原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...

  9. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

随机推荐

  1. [eclipse相关] 001 - 启动+运行优化

    本随笔参考了其他博客内容,且在验证有效之下才或誊抄或摘录或加上自己经验组合而成. 参考博客: 1,http://zwd596257180.gitee.io/blog/2019/04/17/eclips ...

  2. Spring学习(五)--构建Spring Web应用程序

    一.Spring MVC起步 看过猫和老鼠的小伙伴都可以想象Tom猫所制作的捕鼠器:它的目标 是发送一个小钢球,让它经过一系列稀奇古怪的装置,最后触发捕鼠 器.小钢球穿过各种复杂的配件,从一个斜坡上滚 ...

  3. .net 学习官网

    https://docs.microsoft.com

  4. Angular2+之模态框-使用ngx-bootstrap包中的模态框组件实现

    模态框是项目中经常会用到的一个公共功能,通常会被用左提示框或者扩展选项框. 下面,我用一个小例子来简单展示实现模态框功能的过程: 1.为项目加包: ng add ngx-bootstrap 2.在xx ...

  5. C#.NET动态页面静态化生成

    一,动态页面生成静态也的思路是怎样呢? 1>首先我们都是需要有一个静态模板,这模板的作用就是静态页的最基本模板,如下代码: <!DOCTYPE HTML PUBLIC "-//W ...

  6. struts2的action方法匹配以及通配符的使用

    1. ActionMethod:Action执行的时候并不一定要执行execute方法,可以在配置文件中配置action的时候用"method"属性来指定执行哪个方法,也可以在ur ...

  7. JS面向对象——工厂模型

    工厂模型抽象了创建具体对象的过程,以下示例代码说明工厂类型: <!DOCTYPE html> <html> <head> <title>工厂模型< ...

  8. RabbitMQ ——四种ExChange及完整示例

    RabbitMQ常用的Exchange Type有fanout.direct.topic.headers这四种,下面分别进行介绍. 这四种类的exchange分别有以下一些属性,分别是: name:名 ...

  9. elasticsearch 基础 —— 处理冲突及乐观并发控制

    处理冲突 当我们使用 index API 更新文档 ,可以一次性读取原始文档,做我们的修改,然后重新索引 整个文档 . 最近的索引请求将获胜:无论最后哪一个文档被索引,都将被唯一存储在 Elastic ...

  10. 系统调用的API以及汇编代码实现

    作者:严哲璟 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 系统调用过程为 ...