bootstrap学习笔记(5)

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>

转载于:https://www.cnblogs.com/cby-love/p/5447180.html

bootstrap学习笔记(5)相关推荐

Bootstrap学习笔记-布局
Bootstrap学习笔记-布局默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html> <head> <meta charset="utf ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习笔记
Bootstrap学习笔记 Bootstrap介绍 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵 ...
bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）
这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老 ...
Bootstrap学习笔记——导航条、分页导航
1 导航条导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
Bootstrap学习笔记系列1-------Bootstrap网格系统
目录 Bootstrap网格系统学习笔记简单网格偏移列嵌套列列排序 Bootstrap网格系统学习笔记简单网格先上代码再解释 <!DOCTYPE html> <htm ...
BootStrap 学习笔记（一）
BootStrap学习大纲: 1.css样式布局容器:container 1)栅格系统栅格系统就是BootStrap把一个div最多分成12列,其中主要的样式 col-md-数字用的最多,其他( ...
Bootstrap学习笔记01
1.Make Images Mobile Responsive 用处: 使图片适配你的页面宽度. 操作: 给图片添加 .img-responsive class属性. <img src= ...
BootStrap学习笔记，优缺点总结
本篇约定Bootstrap简写为BT BT的受欢迎程度是大家有目共睹的,用它可以快速的搭建出网站.很早就接触过这个框架,其中的栅格系统,css模块化以及js插件做的相当不错,由于工作中较少使用也一直没 ...

bootstrap学习笔记(5)

bootstrap学习笔记(5)相关推荐

最新文章

热门文章