Home >Web Front-end >HTML Tutorial >bootstrap学习笔记(5)_html/css_WEB-ITnose
bootstrap学习笔记(5)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:19:26978browse
Bootstrap输入框组
主要记住一个原则
创建输入框的步骤
中。 接着，在相同的
内，在 class 为 .input-group-addon 的 内放置额外的内容。 把该 放置在 元素的前面或者后面。
面包屑导航：
面包屑导航主要的属性就是在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="#">«</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="#">»</a></li></ul><ul class="pager" style="display:inline;float: left"> <li><a href="#">Next</a></li> </ul> </div></body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：如何用原生javascript实现放大镜效果_html/css_WEB-ITnoseNext article：CSS定位问题（1）：盒模型、浮动、BFC_html/css_WEB-ITnose