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. Python学习---IO的异步[twisted模块]

    安装twisted模块 Linux: pip3 install twisted Window: a. http://www.lfd.uci.edu/~gohlke/pythonlibs/#twiste ...

  2. Spring Boot+MyBabits静态连接多个数据库

    1.修改.properties first.datasource.jdbc-url=jdbc:mysql://localhost/forwind first.datasource.username=r ...

  3. SQL——快速定位相关的外键表

  4. 【ASP.NET】#001 获取服务器IP

    客户端ip: Request.ServerVariables.Get("Remote_Addr").ToString(); 客户端主机名: Request.ServerVariab ...

  5. 第2次作业——APP的案例分析

    APP的案例分析 网易有道词典APP,使用这个软件有三年之久.唯独最爱的一点就是我每天都能听到不一样的英文歌看到创作歌手的来历,当然偶尔也会有其他国家的歌.起初使用这个软件的目的是用来查单词,每天积累 ...

  6. Java使用HTTP编程模拟多参数多文件表单信息的请求与处理

    本文目的是提供Java环境下模拟浏览器页面提交多参数多文件表单请求以及解析请求的Demo代码.这里用Java提供的HttpURLConnection类做HTTP请求,再原始点可以直接使用socket. ...

  7. Jmeter入门3 http请求—content-type与参数

    本文讲三种content-type以及在Jmeter中对应的参数输入方式 第一部分:目前工作中涉及到的content-type 有三种: content-type:在Request Headers里, ...

  8. Python简单的购物车小代码

    # -*- coding: utf-8 -*- # @Time : 2018-05-31 14:56 # @Author : 超人 # @Email : huxiaojiu111@gmail.com ...

  9. 【原创】Spring 注入方式

    Spring 强烈推荐注解在构造器上,且对于不能为null的字段或者属性都用断言. 1. 设值注入 原理:通过setter方法注入 XML配置方式:bean下的property标签,用value指定基 ...

  10. NutzWk 5.0.x 微服务分布式版本开发及部署说明

    NutzWk 5.x 已发布一段时间,这段时间基于此版本开发了智慧水务系统(NB-IOT).某物联网平台.某设备租赁平台.某智慧睡眠平台.某智慧园区项目等,开发和部署过程中遇到一些小问题,开这个帖子把 ...