Heim > Web-Frontend > HTML-Tutorial > bootstrap学习笔记(5)_html/css_WEB-ITnose

bootstrap学习笔记(5)_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:19:26
Original
980 Leute haben es durchsucht

Bootstrap输入框组

主要记住一个原则

创建输入框的步骤

  • 把前缀或后缀元素放在一个带有 class .input-group 的
    中。
  • 接着,在相同的
    内,在 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="#">&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>
    Nach dem Login kopieren

     

     

     

     

      

    Verwandte Etiketten:
    Quelle:php.cn
    Vorheriger Artikel:如何用原生javascript实现放大镜效果_html/css_WEB-ITnose Nächster Artikel:CSS定位问题(1):盒模型、浮动、BFC_html/css_WEB-ITnose
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage