欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap 實(shí)現(xiàn)表格樣式、表單布局的實(shí)例代碼

 更新時(shí)間：2018年12月09日 14:25:50   作者：在代碼的世界里游走  
這篇文章主要介紹了Bootstrap 實(shí)現(xiàn)表格樣式、表單布局的實(shí)例代碼,需要的朋友可以參考下

1. 表格的一些樣式

舉例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
 <table class="table table-striped">
 <caption>這是一個(gè)測(cè)試表格</caption>
 <thead>
  <tr>
   <th>姓名</th>
   <th>年齡</th>
   <th>地區(qū)</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>小胡子</td>
   <td>26</td>
   <td>陜西</td>
  </tr>
  <tr>
   <td>大胡子</td>
   <td>26</td>
   <td>北京</td>
  </tr>
  </tbody>
</table>
</body>
</html>

頁(yè)面效果：

2. 表格行或單元格的樣式

舉例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
 <table class="table table-striped">
 <caption>這是一個(gè)測(cè)試表格</caption>
 <thead>
  <tr>
   <th>姓名</th>
   <th>年齡</th>
   <th>地區(qū)</th>
  </tr>
 </thead>
 <tbody>
  <tr class="info">
   <td>小胡子</td>
   <td>26</td>
   <td>陜西</td>
  </tr>
  <tr class="warning">
   <td>大胡子</td>
   <td>26</td>
   <td>北京</td>
  </tr>
  </tbody>
</table>
</body>
</html>

頁(yè)面效果：

3. 表單布局

(1)垂直表單：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
 <div class="form-group">
  <label for="name">姓名</label>
  <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入姓名">
 </div>
 <div class="form-group">
  <label for="inputfile">選擇文件</label>
  <input type="file" id="inputfile">
 </div>
 <button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>

效果：

(2)內(nèi)聯(lián)表單：它的所有元素是內(nèi)聯(lián)的，向左對(duì)齊的，標(biāo)簽是并排的

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form" class="form-inline">
 <div class="form-group">
  <label for="name">姓名</label>
  <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入姓名">
 </div>
 <div class="form-group">
  <label for="inputfile">選擇文件</label>
  <input type="file" id="inputfile">
 </div>
 <button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>

效果：

(3)水平表單：水平表單與其他表單不僅標(biāo)記的數(shù)量上不同，而且表單的呈現(xiàn)形式也不同

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form" class="form-horizontal">
 <div class="form-group">
    <label for="name" class="col-sm-2 control-label">姓名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入姓名">
    </div>
 </div>
 <div class="form-group">
    <label for="inputfile" class="col-sm-2 control-label">選擇文件</label>
    <div class="col-sm-10">
      <input type="file" id="inputfile">
    <div>
 </div>
 <div class="form-group">
   <div class="col-sm-12">
    <button type="submit" class="btn btn-default">提交</button>
   </div>
 </div>
</form>
</body>
</html>

效果：

總結(jié)

以上所述是小編給大家介紹的Bootstrap 實(shí)現(xiàn)表格樣式、表單布局的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

  • javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單

    javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單

    這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單很詳細(xì)的代碼，解決了大家實(shí)現(xiàn)javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單的問(wèn)題，感興趣的小伙伴們可以參考一下
    2015-11-11
  • 分享JavaScript的?3?種工廠模式的用法

    分享JavaScript的?3?種工廠模式的用法

    這篇文章主要分享JavaScript的?3?種工廠模式,工廠模式是設(shè)計(jì)模式中最常用的設(shè)計(jì)模式之一，這種類(lèi)型的設(shè)計(jì)模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對(duì)象的最佳方式，下文關(guān)于工廠模式的更多相關(guān)資料需要的小伙伴可以參考一下
    2022-04-04
  • weakMap為什么是弱引用原理

    weakMap為什么是弱引用原理

    這篇文章主要為大家介紹了weakMap為什么是弱引用原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-02-02
  • js面向?qū)ο蟮膶?xiě)法

    js面向?qū)ο蟮膶?xiě)法

    這篇文章主要介紹了四種js面向?qū)ο蟮某Ｒ?jiàn)寫(xiě)法，還介紹了有關(guān)this的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下
    2016-02-02
  • 基于slideout.js實(shí)現(xiàn)移動(dòng)端側(cè)邊欄滑動(dòng)特效

    基于slideout.js實(shí)現(xiàn)移動(dòng)端側(cè)邊欄滑動(dòng)特效

    這篇文章主要為大家詳細(xì)介紹了基于slideout.js實(shí)現(xiàn)移動(dòng)端側(cè)邊欄滑動(dòng)特效,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-11-11
  • XP折疊菜單&仿QQ2006菜單

    XP折疊菜單&仿QQ2006菜單

    XP折疊菜單&仿QQ2006菜單...
    2006-12-12
  • es6系列教程_ Map詳解以及常用api介紹

    es6系列教程_ Map詳解以及常用api介紹

    下面小編就為大家?guī)?lái)一篇es6系列教程_ Map詳解以及常用api介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • JavaScript基于用戶照片姓名生成海報(bào)

    JavaScript基于用戶照片姓名生成海報(bào)

    這篇文章主要介紹了JavaScript基于用戶照片姓名生成海報(bào),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • 解析瀑布流布局:JS+絕對(duì)定位的實(shí)現(xiàn)

    解析瀑布流布局:JS+絕對(duì)定位的實(shí)現(xiàn)

    本篇文章是對(duì)瀑布流局部的實(shí)現(xiàn)進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下
    2013-05-05
  • JS格式化字符串的兩種方法(反引號(hào)與String.prototype)

    JS格式化字符串的兩種方法(反引號(hào)與String.prototype)

    本文一共介紹了兩種實(shí)現(xiàn)方式,使用反引號(hào)或自定義方法實(shí)現(xiàn),需要的朋友可以參考下
    2023-06-06

最新評(píng)論