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. （转）透明光照模型与环境贴图之基础理论篇（折射率、色散、fresnel定律） .

     摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人” 材质和光的交互除了反射现象,对于透明物 ...

  2. JS传递函数并且调用

    封装的函数: function getDataByJsonP(methName, inData, fn) { // 这里fn可以直接传入函数名字 $.ajax({ url: '', //请求的url地 ...

  3. Spring中手动增加配置文件中占位符引用的变量

    在项目中遇到一个这样的需求,项目的配置文件由外部传入,这时spring配置文件那些占位符变量该如何取值呢? 解决这个问题的做法有几种,我想到的大概有以下三种: 1.通过系统属性来实现,把外部传入的配置 ...

  4. dede:arclist调用文章正文全部内容

    dede:arclist调用文章正文全部内容 {dede:arclist row='20'} <div class="aboutbox"> <h4>[fie ...

  5. (未解决)记录一次登录&jmeter，留下的一地鸡毛

    一般的登录校验过程是这样的:客户端发起请求,拿到服务器给的“令牌”,再次发起请求,服务器验证“令牌”是否正确,从而返回给客户端是登录成功还是登录失败.然后我按照这个流程,用jmeter去模拟了登录过程 ...

  6. cgroup测试存储设备IOPS分配

    1 使用:创建树并且attach子系统 首先要创建文件系统的挂载点作为树的根 mkdir /cgroup/name mkdir /cgroup/cpu_and_mem Mount这个挂载点到一个或者多 ...

  7. oracle 事务 数据伪列

    在用户进行数据更新操作(DML)事务一定会起作用. 事务的出现会保证数据的完整性.一致性.在整个事务的处理过程之中主要使用两个操作命令: · 事务的提交(COMMIT):是真正的向数据库之中发出更新指 ...

  8. RPC--HDFS节点间的沟通桥梁

    RPC(Remote Procedure Call, 远程过程调用)是一种通过网络从远程计算机上请求服务来得到计算服务或者数据服务,且不需要了解底层网络技术的协议和框架. RPC远程调用是构建在语言级 ...

  9. 存储类、链接和内存管理（c prime plus）

    首先介绍三个概念: (1)作用域:作用域描述了程序中可以访问一个标识符的一个或多个区域. 一共有三种作用域:代码块作用域.函数原型作用域和文件作用域 a.代码块作用域:一个代码块是包含在开始花括号和对 ...

  10. spark练习--由IP得到所在地

    今天我们就来介绍,如何根据一个IP来求出这个IP所在的地址是什么,首先我们如果要做这个内容,那么我们要有一个IP地址的所在地字典,这个我们可以在网上购买,形如: 1.0.1.0|1.0.3.255|1 ...