亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Foundation Chinese Manual / Foundation 輸入框尺寸

Foundation 輸入框尺寸

使用網(wǎng)格的列來設置輸入框的大小，如 .large-6, .medium-6, 等。

更多網(wǎng)格系統(tǒng)知識，可以點擊 網(wǎng)格系統(tǒng) 教程。

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<form>
<div class="row">
  <h2>使用網(wǎng)格設置輸入框大小</h2>
  <div class="large-10 medium-7 columns">
    <label>large-10 medium-7 (100% on small)
      <input type="text" placeholder="Name">
    </label>
  </div>
</div>

<div class="row">
  <div class="small-5 columns">
    <label>small-5
      <input type="text" placeholder="Name">
    </label>
  </div>
</div>

<div class="row">
  <div class="medium-3 columns">
    <label>medium-3 (100% on small)
      <input type="text" placeholder="Name">
    </label>
  </div>
</div>

<div class="row">
  <div class="medium-4 columns">
    <label>medium-4 (100% on small, stacked)
      <input type="text" placeholder="Name">
    </label>
  </div>

  <div class="medium-4 columns">
    <label>medium-4 (100% on small, stacked)
      <input type="text" placeholder="Name">
    </label>
  </div>

  <div class="medium-4 columns">
    <label>medium-4 (100% on small, stacked)
      <input type="text" placeholder="Name">
    </label>
  </div>
</div>
</form>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

相等大小列

以下演示了相等大小列的實例:

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<form>
  <div class="row">
    <h2>三個相等寬度的輸入框</h2>
    <div class="medium-4 columns">
      <label>medium-4 (100% on small, stacked)
        <input type="text" placeholder="Name">
      </label>
    </div>

    <div class="medium-4 columns">
      <label>medium-4 (100% on small, stacked)
        <input type="text" placeholder="Name">
      </label>
    </div>

    <div class="medium-4 columns">
      <label>medium-4 (100% on small, stacked)
        <input type="text" placeholder="Name">
      </label>
    </div>
  </div>
</form>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

內(nèi)聯(lián)標簽

如果你希望你的標簽內(nèi)容顯示在左邊（不是上邊），可以將標簽元素 label 放在輸入框左邊的不同的列上，并使用 .inline 類來設置垂直居中:

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<form>
  <div class="row">
    <h2>內(nèi)聯(lián)標簽 Label</h2>
    <p><strong>提示:</strong> 如果你需要標簽顯示在左邊，可以移除 .right 類。</p>
    <div class="small-8">
      <div class="row">
        <div class="small-3 columns">
          <label for="name" class="inline right">Name</label>
        </div>
        <div class="small-9 columns">
          <input type="text" id="name" placeholder="First Name..">
        </div>
      </div>
    </div>
  </div>
</form>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

前置和后置標簽

你可以在 <div class="row collapse"> 中添加前置和后置標簽，元素為： <element class="postfix"> 或 <element class="prefix">?？梢允褂镁W(wǎng)格系統(tǒng)來設置前置和后置標簽的大小：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<form>
  <div class="row">
    <h2>前置后置標簽</h2>
    <div class="large-6 columns">
      <div class="row collapse prefix-radius">
        <div class="small-3 columns">
          <span class="prefix">前置</span>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="row collapse postfix-radius">
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
        <div class="small-3 columns">
          <span class="postfix">后置</span>
        </div>
      </div>
    </div>
  </div>
</form>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

前置和后置標簽按鈕

可以使用 <a> 元素添加 .button 類來設置前置和后置按鈕:

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<form>
  <div class="row">
    <h2>前置/后置按鈕</h2>
    <div class="large-12 columns">
      <div class="row collapse">
        <div class="small-10 columns">
          <input type="text" placeholder="搜索">
        </div>
        <div class="small-2 columns">
          <a href="#" class="button postfix">提交</a>
        </div>
      </div>
    </div>
  </div>
</form>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

前置和后置標簽圓角按鈕

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<form>
  <div class="row">
    <h2>前置和后置標簽</h2>
    <p>圓角前置和后置標簽:</p>
    <div class="large-6 columns">
      <div class="row collapse prefix-radius">
        <div class="small-3 columns">
          <span class="prefix">Prefix</span>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="row collapse postfix-radius">
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
        <div class="small-3 columns">
          <span class="postfix">Postfix</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <p>圓形前置和后置標簽按鈕:</p>
    <div class="large-6 columns">
      <div class="row collapse prefix-round">
        <div class="small-3 columns">
          <a href="#" class="button prefix">Go</a>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="row collapse postfix-round">
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
        <div class="small-3 columns">
          <a href="#" class="button postfix">Go</a>
        </div>
      </div>
    </div>
  </div>
</form>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例