Bootstrap输入框组

主要记住一个原则
创建输入框的步骤

  • 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
  • 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
  • 把该 <span> 放置在 <input> 元素的前面或者后面。

面包屑导航：

     面包屑导航主要的属性就是在ul或者li加上breadcrumb属性。

分页和翻页：

     以下是制作分页和翻页的小例子：
<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>

   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

</head>

<body>

  <div>

  <ul class="pager" style="display:inline;float: left">

    <li><a href="#">Previous</a></li>

  </ul>

<ul class="pagination" style="display:inline;float: left">

  <li><a href="#">&laquo</a></li>

 <li class="active"><a href="#">1</a></li>

  <li class="disabled"><a href="#">2</a></li>

   <li><a href="#">3</a></li>

  <li><a href="#">4</a></li>

   <li><a href="#">5</a></li>

  <li><a href="#">&raquo</a></li>

</ul>

<ul class="pager" style="display:inline;float: left">

    <li><a href="#">Next</a></li>

  </ul>

  </div>

</body>

</html>
 
 
 
  

bootstrap学习笔记(5)的更多相关文章

  1. Bootstrap~学习笔记索引

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

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

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

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

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

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

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

  5. Bootstrap学习笔记-布局

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

  6. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  7. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  8. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  9. bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

  10. bootstrap 学习笔记

    bootstrap作为当下的流行框架不知道它怎么能行呢? 之前也看过好多bootstrap的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...

随机推荐

  1. Linux strace命令详解

    Linux抓取TCP的命令: tcpdump ps -ef 参数命令详解: Linux下一切皆文件,我们打开一个socket,实际上也是打开了一个文件 我们打开一个网卡,实际上也是调用Linux系统的 ...

  2. Python学习---xml文件的解析[beautifulsoup4模块学习]

    1.1. 安装beautifulsoup4 pip install beautifulsoup4 [更多参考]https://blog.csdn.net/sunhuaqiang1/article/de ...

  3. zabbix之自动发现Tomcat多实例(第一种：已经部署完成，后续不再添加；第二种：后续或根据需要添加Tomcat实例)

    单一实例手动部署:https://www.cnblogs.com/huangyanqi/p/8522526.html 注释:参考的一位博主的博客后续做的修改,那个博主的网址找不到了!!!! 背景: 1 ...

  4. setnx redis

    使用锁 1)setnx(lockkey, 当前时间+过期超时时间) ,如果返回1,则获取锁成功:如果返回0则没有获取到锁,转向2.2.)get(lockkey)获取值oldExpireTime ,并将 ...

  5. [转]Linux下查看CPU信息、机器型号等硬件信息

    From: http://www.jbxue.com/LINUXjishu/14582.html 查看CPU信息(型号) : # cat /proc/cpuinfo | grep name | cut ...

  6. Javascript (ECMAScript5) 的细节和违反直觉的地方

    记录在学习Javascript (ECMAScript5) 中的一些与其他语言的不同之处,本文会不断更新. 里面的知识可能并不太适合有一定经验的Javascript程序员,仅仅但不限于给初学者阅读. ...

  7. Spark系列-初体验（数据准备篇）

    Spark系列-初体验(数据准备篇) Spark系列-核心概念 在Spark体验开始前需要准备环境和数据,环境的准备可以自己按照Spark官方文档安装.笔者选择使用CDH集群安装,可以参考笔者之前的文 ...

  8. ElasticSearch 通过nginx做HTTP验证

    在ElasticSearch 的设置文件中如果设置了 network.host: 0.0.0.0 则表示ElasticSearch 服务是公开的任何ip都可以访问ElasticSearch 服务.这样 ...

  9. 新浪微博资深大牛全方位剖析 iOS 高级面试

    第1章 课程简介本章对这门课程所讲述内容进行概要介绍,其中包括课程目标.适合人群,课程特色.课程收获.课程安排等.整个课程学习完结后,有机会获得电话模拟面试及内推. 1-1 课前必读(不看会错过一个亿 ...

  10. 个性化 UIAlertController

    系统的 UIAlertController 封装的很漂亮,用block代替之前 UIAlertView 的代理,用起来更方便的,但是其曝露出来的接口也不多如果要个性化一些东西,比如字体大小.颜色就不是 ...