Bootstrap -- 表格樣式、表單佈局

来源:https://www.cnblogs.com/ChengWenHao/archive/2018/12/08/BootstrapPart3.html
-Advertisement-
Play Games

Bootstrap -- 表格樣式、表單佈局 1. 表格的一些樣式 舉例： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Tes ...


Bootstrap -- 表格樣式、表單佈局

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>這是一個測試表格</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
      <th>地區</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>
View Code

頁面效果：

 

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>這是一個測試表格</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
      <th>地區</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>
View Code

頁面效果：

 

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="請輸入姓名">
  </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>
View Code

效果：

 

(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>
<form role="form" class="form-inline">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="請輸入姓名">
  </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>
View Code

效果：

 

(3)水平表單：水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同

<!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="請輸入姓名">
        </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>
View Code

效果：

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Echarts地圖繪製（散點，色卡）
    echarts繪製地圖時，提供了js內部註冊，也提供了json數據手動註冊，這兩種都可以繪製對應地圖，但有一點不同的是，js內部只註冊了中國地圖和世界地圖，而json數據提供了世界，中國，中國城市的數據 手動註冊：引入json數據，使用 echarts.registerMap('china', ch ...
  • javascript原型對象與原型鏈
    在javascript中，當系統載入構造函授後 ，會自動在記憶體中增加一個對象，這個對象就是原型對象。構造函數和原型對象在記憶體中表現為相互獨立，但兩者之間還存在聯繫，構造函數的prototype是原型對象，而原型對象的constructor是構造函數。 創建對象的方法 字面量、構造函數、Object. ...
  • 上傳文件Base64格式（React）
    記錄一下上傳文件時將文件數據轉為Base64的方法 通過 FileReader對象創建一個實例，然後使用 readAsDataURL方法將數據轉為Base64格式 註意: 讀取過程是非同步的 綁定onload事件，該事件在數據讀取完成後觸發 具體代碼（react項目中）： const reader = ...
  • JS：事件委托
    事件委托 1. 事件流 事件流描述的是從頁面中接收事件的順序。 JS高級程式設計(第3版) 規定的事件流有三個階段：①事件 捕獲 階段、②處於 目標 階段、③事件 冒泡 階段 2. 事件委托 當需要添加的事件過多時，可以使用 事件委托 ，而事件委托實際上利用了事件 冒泡 的特性。 使用事件委托還需了 ...
  • 前端（四）
    前端之常用標簽的使用、邊界圓角、精靈圖以及盒模型的佈局 前言 上篇博客介紹了組合選擇器，包括四種，分別是群組選擇器、後代（子代）選擇器、兄弟（相鄰選擇器）及交集選擇器；a 標簽的四大偽類選擇器，a:link、a:hover、a:active、a:visited，其中 hover 和 active 也 ...
  • 百度前端學院參考答案：第二十五天到第二十七天 倒數開始 滴答滴 滴答滴（1）
    編碼 我們現在來做一個最簡單的時鐘，通過小練習來學習 Date，複習定時，然後再練習一下函數的封裝具體需求如下： 在頁面中顯示當前日期及時間，按秒更新 格式為 YYYY 年 MM 月 DD 日 星期 D HH:mm:ss 註意位數的補齊，比如：-- 假設時間為2008年10月10日星期一的12點12 ...
  • 【Angular專題】——（1）Angular，孤傲的變革者
    [TOC] 一. 漫談Angular ，來自Google的前端 框架，與 ,`Vue 7.0 Angularjs1.0 jQuery Angular2.0 Angular`一直在用行動詮釋著自己的孤傲和才華。 非常喜歡引入和傳播思想層面的概念，它把那些被公認為正確優雅且有助於工程實踐的事物帶給前端， ...
  • 小程式線上實例
    最近在開發小程式，個人覺得小程式開發很有意思，體驗也很流暢，很贊！（由於是初版，頁面及體驗還需優化，購物流程是ok的，發現BUG及改進建議歡迎在下方留言，謝謝！） 話不多說，附上部分效果圖！手機預覽打開微信搜索“樂活城市”小程式。（初次接觸小程式的小伙伴們，可以直接去官方給出的小程式API腦補，我這 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類