My前端bootstrap（二）

時間  2019-12-09
標籤 前端 bootstrap 欄目 Bootstarp 简体版
原文   原文鏈接

  基於手腳架(Scaffolding)之上，Bootstrap的基礎CSS(Base CSS)提供了一系列的基礎Html頁面要素。本文將主要深刻講解排版(Typography),表格(Table),表單(Forms),按鈕(Buttons)這四個方面的內容。css

1.排版 (Typography)，它囊括標題(Headings),段落 (paragraphs), 列表(lists)以及其餘內聯要素html

<div class="row">
  <div class="span6 ">
  <blockquote class="pull-right">
  <p>凌冬將至. 我是黑暗中的利劍，長城上的守衛，抵禦寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護王國的堅盾。</p>
  守夜人軍團總司令.<small>蒙奇.D.<cite title="">路飛</cite></small>
</blockquote>
  </div>
  <div class="span6 ">
  <blockquote >
  <p>凌冬將至.
我是黑暗中的利劍，長城上的守衛，抵禦寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護王國的堅盾。</p>
  守夜人軍團總司令.<small>蒙奇.D.<cite title="">路飛</cite></small>
</blockquote>
  </div>
  </div>

                                              圖2-2 引用(Blockquotes)git

    1.4列表(lists).Bootstrap提供三種標籤來表現不一樣類型的列表。<ul>表示無序列表，<ul class="unstyled">表示無樣式的無序列表，<ol>表示有序列表，<dl>表示描述列表，<dl class="dl-horizontal">表示豎排描述列表。圖2-3較好顯示了這幾種列表：github

                                                            圖2-3 列表(lists)chrome

<div class="span8">
      <form class="form-horizontal">
        <fieldset>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Focused input</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">Uneditable input</label>
            <div class="controls">
              <span class="input-xlarge uneditable-input">Some value here</span>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="disabledInput">Disabled input</label>
            <div class="controls">
              <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
                This is a disabled checkbox
              </label>
            </div>
          </div>
          <div class="control-group warning">
            <label class="control-label" for="inputWarning">Input with warning</label>
            <div class="controls">
              <input type="text" id="inputWarning">
              <span class="help-inline">Something may have gone wrong</span>
            </div>
          </div>
          <div class="control-group error">
            <label class="control-label" for="inputError">Input with error</label>
            <div class="controls">
              <input type="text" id="inputError">
              <span class="help-inline">Please correct the error</span>
            </div>
          </div>
          <div class="control-group success">
            <label class="control-label" for="inputSuccess">Input with success</label>
            <div class="controls">
              <input type="text" id="inputSuccess">
              <span class="help-inline">Woohoo!</span>
            </div>
          </div>
          <div class="control-group success">
            <label class="control-label" for="selectError">Select with success</label>
            <div class="controls">
              <select id="selectError">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <span class="help-inline">Woohoo!</span>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
      </form>
    </div>
View Code

 

包括選中框，不可選中，不可輸入，輸入警告框，輸入錯誤框，輸入成功框，select多選框
bootstrap

 

   3.  表單(Forms).Bootstrap的表單是很是驚豔的部分。最好的地方在於你如何使用這些hmtl標籤，它都會有很好的表現效果，並且不須要其餘多餘的代碼。不管多複雜的佈局均可以根據這些簡潔，可擴展，事件綁定的要素來輕易實現。主要提供了四四種表單選項，如表2-2所示：瀏覽器

名字ide

Class佈局

描述網站

Vertical (default)

.form-vertical (not required)

堆放式, 可控制的左對齊標籤

Inline

.form-inline

左對齊標籤和簡約的內聯控制塊

Search

.form-search

放大的圓角，具備美感的搜索框

Horizontal

.form-horizontal

左漂浮, 右對齊標籤 

         推薦到官方文檔去體驗下各類表單要素的真實效果，在chrome,Firefox等現代瀏覽器下顯示十分優雅。

<div class="span8">
      <form class="form-horizontal">
        <fieldset>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Focused input</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">Uneditable input</label>
            <div class="controls">
              <span class="input-xlarge uneditable-input">Some value here</span>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="disabledInput">Disabled input</label>
            <div class="controls">
              <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
                This is a disabled checkbox
              </label>
            </div>
          </div>
          <div class="control-group warning">
            <label class="control-label" for="inputWarning">Input with warning</label>
            <div class="controls">
              <input type="text" id="inputWarning">
              <span class="help-inline">Something may have gone wrong</span>
            </div>
          </div>
          <div class="control-group error">
            <label class="control-label" for="inputError">Input with error</label>
            <div class="controls">
              <input type="text" id="inputError">
              <span class="help-inline">Please correct the error</span>
            </div>
          </div>
          <div class="control-group success">
            <label class="control-label" for="inputSuccess">Input with success</label>
            <div class="controls">
              <input type="text" id="inputSuccess">
              <span class="help-inline">Woohoo!</span>
            </div>
          </div>
          <div class="control-group success">
            <label class="control-label" for="selectError">Select with success</label>
            <div class="controls">
              <select id="selectError">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <span class="help-inline">Woohoo!</span>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
View Code

 

                                                           圖2-5 表單狀態控制

按鈕(Buttons).Bootstrap提供多種樣式的按鈕，一樣是經過CSS的類來控制,包括btn, btn-primary, btn-info,btn-success等不一樣顏色的按鈕，亦能夠簡單經過.btn-large .btn-mini等CSS的class控制按鈕大小，可以同時用在<a>,<button>,<input>標籤上，很是簡單易用。如圖2-6所示，不一樣顏色的按鈕：

                                                            圖2-6 按鈕(Buttons)

<table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Button</th>
        <th>class=""</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><button class="btn" href="#">Default</button></td>
        <td><code>btn</code></td>
        <td>Standard gray button with gradient</td>
      </tr>
      <tr>
        <td><button class="btn btn-primary" href="#">Primary</button></td>
        <td><code>btn btn-primary</code></td>
        <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
      </tr>
      <tr>
        <td><button class="btn btn-info" href="#">Info</button></td>
        <td><code>btn btn-info</code></td>
        <td>Used as an alternative to the default styles</td>
      </tr>
      <tr>
        <td><button class="btn btn-success" href="#">Success</button></td>
        <td><code>btn btn-success</code></td>
        <td>Indicates a successful or positive action</td>
      </tr>
      <tr>
        <td><button class="btn btn-warning" href="#">Warning</button></td>
        <td><code>btn btn-warning</code></td>
        <td>Indicates caution should be taken with this action</td>
      </tr>
      <tr>
        <td><button class="btn btn-danger" href="#">Danger</button></td>
        <td><code>btn btn-danger</code></td>
        <td>Indicates a dangerous or potentially negative action</td>
      </tr>
      <tr>
        <td><button class="btn btn-inverse" href="#">Inverse</button></td>
        <td><code>btn btn-inverse</code></td>
        <td>Alternate dark gray button, not tied to a semantic action or use</td>
      </tr>
    </tbody>
  </table>
View Code

頗有意思的一個網站能夠模擬生成navbar(導航欄) body Typography(排版)等等！而且下載生成的css代碼

 StyleBootstrap http://stylebootstrap.info/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程