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. 审计系统---堡垒机项目之用户交互+session日志写入数据库[完整版]

    2018-06-20 时隔一个多月,忘记了之前的所有操作,重拾起来还是听不容易的,想过放弃,但还是想坚持一下,加油. 世界杯今天葡萄牙1:0战胜摩洛哥,C 罗的一个头球拯救了时间,目前有4个射球,居2 ...

  2. Zabbix日常监控（触发器表达式、远程执行命令、宏简等）简单记录

    主机的工作基本流程 Host group --> Host --> Application --> Item --> Trigger(OK-->PROBLEM,trigg ...

  3. 【教程】【FLEX】#005 拖动

    在Flex中,组件的拖动分为: 1. 加强型(即本身就可以拖动设置是否可以拖动的属 [dragEnabled ,dropEnabled ] 即可) 2. 非加强型(可以通过DragManager,Dr ...

  4. I - Matches Game（异或运算符的使用）

    I - Matches Game Description Here is a simple game. In this game, there are several piles of matches ...

  5. SAP 前端技术的演化史简介

    Jerry之前曾经写过一篇微信公众号文章,题目叫<> 关注我的公号"汪子熙"后,在历史菜单"前端开发相关"里即可找到这篇文章: 该文章简单回顾了SA ...

  6. RabbitMQ学习以及与Spring的集成(三)

    本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收. 在RabbitMQ的Spring配置文件中,首先需要增加命名空间. xmlns:rabbit="http://www. ...

  7. python第十六课——外部函数and内部函数

    1.外部函数&内部函数 内部函数: 定义在某个函数的内部,就是内部函数: [注意事项]: 1).内部函数可以随意使用它外部函数中的内容 2).外部函数不能使用内部函数中的内容 3).内部函数不 ...

  8. Oracle-本地连接没问题，远程连接有问题解决方式

    1. 问题 我的环境是oracle11gr2,本地用plsql还是toad连接都没有不论什么问题,而用别的机器远程连接就提示 无监听程序等错误. 2. 原因 oracle安装路径  --- 比如: F ...

  9. Linux配置CentOs7.4(网络连接处理)

    说明:CentOS 7.0默认安装好之后是没有自动开启网络连接的! 进入登录界面 账号输入root 回车 再输入上面设置的root密码回车 系统登录成功 设置IP地址.网关DNS cd  /etc/s ...

  10. 4196. [NOI2015]软件包管理器【树链剖分】

    Description Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖( ...