Optimiertes Bootstrap-Tutorial

Bootstrap ist sehr einfach zu erlernen und die Stile, die es bietet, sind sehr schön. Mit ein wenig einfachem Lernen können Sie wunderschöne Seiten erstellen.

chinesische Bootstrap-Website: http://v3.bootcss.com/

bootstrap bietet drei Arten von Downloads:

--------------------------------- -- ---------------

Bootstrap für Produktionsumgebungen

Kompilierte und komprimierte CSS-, JavaScript- und Schriftartdateien. Dokumentation und Quellcodedateien sind nicht enthalten.

Bootstrap-Quellcode

Quellcode für Less, JavaScript und Schriftartdateien, mit Dokumentation. Erfordert weniger Compiler und einige Einrichtungsarbeiten.

Sass

Dies ist ein Bootstrap-Quellcode-Migrationsprojekt von Less nach Sass, das für die schnelle Einführung in Rails-, Compass- oder reine Sass-Projekte verwendet wird.

--------------------------------- -- -------------

Tatsächlich können wir Bootstrap verwenden, ohne es herunterzuladen:

Die chinesische Website Bootstrap hat speziell einen eigenen kostenlosen CDN-Beschleunigungsdienst für Bootstrap entwickelt. Basierend auf dem CDN-Dienst inländischer Cloud-Anbieter ist die Zugriffsgeschwindigkeit schneller, der Beschleunigungseffekt ist deutlicher, es gibt keine Geschwindigkeits- und Bandbreitenbeschränkungen und er ist dauerhaft kostenlos.

base.html

  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
  
  
    <h1>你好，bootstrap！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  

Bootstrap wurde in base.html eingeführt. Speichern Sie es und wir können die von Bootstrap bereitgestellten Stile verwenden.

Schriftartsymbol

Bootstrap bietet standardmäßig mehr als 200 Symbole. Wir können diese Symbole über Span-Tags verwenden:

    <h3>图标</h3>   
    <span class="glyphicon glyphicon-home"></span>
    <span class="glyphicon glyphicon-signal"></span>
    <span class="glyphicon glyphicon-cog"></span>
    <span class="glyphicon glyphicon-apple"></span>
    <span class="glyphicon glyphicon-trash"></span>
    <span class="glyphicon glyphicon-play-circle"></span>
    <span class="glyphicon glyphicon-headphones"></span>

Schaltfläche

　-Tag wird zum Erstellen von Schaltflächen verwendet, und Bootstrap bietet umfangreiche Schaltflächenstile.

    <h3>按钮</h3>
    <button type="button" class="btn btn-default">按钮</button>
    <button type="button" class="btn btn-primary">primary</button>
    <button type="button" class="btn btn-success">success</button>
    <button type="button" class="btn btn-info">info</button>
    <button type="button" class="btn btn-warning">warning</button>
    <button type="button" class="btn btn-danger">danger</button>
    
    <h3>按钮尺寸</h3>
    <button type="button" class="btn btn-default">按钮</button>
    <button type="button" class="btn btn-primary btn-lg">primary</button>
    <button type="button" class="btn btn-success btn-sm">success</button>
    <button type="button" class="btn btn-info btn-xs">info</button>

    <h3>把图标显示在按钮里</h3>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>  按钮</button>

Zusätzlich zur Standardgröße der Schaltfläche bietet Bootstrap auch drei Parameter zum Anpassen der Größe der Schaltfläche, nämlich: btn-lg, btn-sm und btn-xs.

Dropdown-Menü

Das Dropdown-Menü ist eine der häufigsten Interaktionen und Bootstrap bietet wunderschöne Stile.

     <h3>下拉菜单</h3>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>

Eingabefeld

Verwenden Sie das Tag , um ein Eingabefeld zu erstellen.

    <h3>输入框</h3>
    <div class="input-group">
      <span class="glyphicon glyphicon-user"></span>
      <input type="text" placeholder="username">
    </div>

    <div class="input-group">
      <span class="glyphicon glyphicon-lock"></span>
      <input type="password" placeholder="password">
    </div>

Navigationsleiste

Die Navigationsleiste ist als Orientierungshilfe für die gesamte Website unverzichtbar.

    <h3>导航栏</h3>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li class="divider">
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
<!--/.nav-collapse -->
      </nav>

 

  

表单

　　人与系统之间数据的传递都需要依靠表单来完成。比如注册/登录信息的提交，查询条件的提交等。用

标签来创建表单。

   <h3>表单</h3>
    

File input

Example block-level help text here.

Check me out

Submit

 

 

警告框

　　警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签，通过bootstrap所提供的样式可以瞬间制作出漂亮的警告框。

    <h3>警告框</h3>
    <div class="alert alert-warning alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
    <div class="alert alert-success" role="alert">
        <a href="#" class="alert-link">success!</a>
    </div>
    <div class="alert alert-info" role="alert">
        <a href="#" class="alert-link">info!</a>
    </div>
    <div class="alert alert-warning" role="alert">
        <a href="#" class="alert-link">warning!</a>
    </div>
    <div class="alert alert-danger" role="alert">
        <a href="#" class="alert-link">danger!</a>
    </div>

  

 

进度条

　　系统的处理过程往往需要用户等待，进度条可以让用户感知到系统的处理过程，从而增加容忍度。

    <h3>进度条</h3>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        70%
      </div>
    </div>

 

 

 阅读原文请点击此处