Bootstrap全域性CSS樣式之表單

阿新 • • 發佈：2019-01-12

.form-control——將單獨的表單控制元件賦予一些全域性樣式，如預設寬度width:100%；

.form-group——包裹表單控制元件，獲得最好的排列；

.form-inline——將表單設定為內聯表單，只適用於視口（viewport）至少在 768px 寬度時；

.sr-only——將label標籤隱藏；

.help-block——用於設定提示文字；

.form-horizontal——可以將label標籤和控制元件組水平並排佈局；

.radio-inline、.checkbox-inline——將相應控制元件水平排列；

.form-control-static——將p元素設定為靜態控制元件；

.has-error、.has-warning、has-success——分別對應校驗狀態；

.has-feedback——為控制元件新增輔助圖示（與圖示引用類聯合使用）；

.input-lg——建立大一些的表單控制元件；

.input-sm——建立小一些的表單控制元件；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS全域性樣式_柵格系統</title>
    <!--
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">

    </style>
</head>
<body>
<div class="container">
    <form role="form" class="form-inline">
        <div class="form-group">
            <label class="sr-only">使用者名稱</label>
            <input type="text" class="form-control" placeholder="使用者名稱/郵箱/手機號"/>
        </div>
        <div class="form-group">
            <label class="sr-only">密碼</label>
            <input type="password" class="form-control" placeholder="輸入6-14位英文和數字組合密碼"/>
        </div>
        <div class="form-group">
            <label class="sr-only">生日</label>
            <input type="date" class="form-control" placeholder="出生年月"/>
        </div>
        <div class="form-group">
            <label class="sr-only">上傳頭像</label>
            <input type="file" class="form-control input-lg"/>
            <p class="help-block">選擇您需要的頭像檔案</p>
        </div>
    </form>
    <form role="form" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-4 control-label">使用者名稱</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="使用者名稱/郵箱/手機號"/>
            </div>

        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">密碼</label>
            <div class="col-sm-8">
                <input type="password" class="form-control" placeholder="輸入6-14位英文和數字組合密碼"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">生日</label>
            <div class="col-sm-8">
                <input type="date" class="form-control" placeholder="出生年月"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"/>記住密碼
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <button class="btn btn-default">登入</button>
            </div>
        </div>
    </form>
    <form role="form" class="form-horizontal">
        <div class="form-group">
           <label>喜歡的球隊</label>
            <div class="checkbox">
                <label>
                    <input type="checkbox"/>廣州恆大
                </label>
                <label>
                    <input type="checkbox"/>上海上港
                </label>
                <label>
                    <input type="checkbox"/>北京國安
                </label>
            </div>
        </div>
        <div class="form-group">
           <label>性別</label>
            <div class="radio">
                <label>
                    <input type="radio" checked name="gender"/>男
                </label>
                <label>
                    <input type="radio" name="gender"/>女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label>所屬城市</label>
            <select class="form-control" multiple>
                <option>北京</option>
                <option>上海</option>
                <option>廣州</option>
            </select>
        </div>
        <div class="form-group">
            <label class="sr-only"></label>
            <textarea class="form-control" rows="5" placeholder="請文明用語"></textarea>
        </div>
        <p class="form-control-static">請按照郵箱格式輸入： 
[email protected]</p>
        <div class="form-group">
            <label>密碼</label>
            <input class="form-control" type="password"  disabled/>
        </div>
        <div class="form-group">
            <label>暱稱</label>
            <input class="form-control" type="text" placeholder="胖虎" readonly/>
        </div>
        <div class="form-group has-error has-feedback">
            <label>使用者名稱</label>
            <input class="form-control" type="text" />
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <label>使用者名稱</label>
            <input class="form-control" type="text" />
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        <div class="form-group has-warning has-feedback">
            <label>使用者名稱</label>
            <input class="form-control" type="text" />
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
    </form>
</div>

</body>
</html>

Bootstrap全域性CSS樣式之表單

.form-control——將單獨的表單控制元件賦予一些全域性樣式，如預設寬度width:100%； .form-group——包裹表單控制元件，獲得最好的排列； .form-inline——將表單設定為內聯表單，只適用於視口（viewport）至少在 768px 寬度時

Bootstrap——全域性CSS樣式

1、.container 為頁面內容和柵格系統包裹.container容器，響應式，大屏固定寬度且居中，小屏百分百自適應。 2、.row . col-*-* Bootstrap中定義了一套響應式的網格系統，將一個容器劃分成12列，然後通過col-*-*的類名控制每一列的佔比（每列寬度

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

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

bootstrap 之表單佈局

文章來自：原始碼線上https://www.shengli.me/css/422.html 垂直表單：效果圖：（2）內聯表單：它的所有元素是內聯的，向左對齊的，標籤

JavaFX入門（六）之帶有JavaFX CSS的花式表單

本教程通過新增級聯樣式表（CSS）使您的JavaFX應用程式看起來很有吸引力。您開發設計，建立.css檔案並應用新樣式。在本教程中，您將獲取一個使用標籤，按鈕和背景顏色的預設樣式的登入表單，並通過一些簡單的CSS修改將其轉換為程式化的應用程式，如圖5-1所示。

easyui 之表單驗證

pla focus res default code font led disable function 1 /** 2 * 擴展easyui的validator插件rules，支持更多類型驗證 3 */ 4 $.extend($.fn.val

Bootstrap中水平排列的表單form-inline

name 記住密碼 3.0 lac type link form boot 排列 1 <html> 2 <head> 3 <title>初識Bootstrap</title> 4 <meta charset="

jQuery選擇器之表單元素選擇器

padding ima col image char ref 選中 doc 技術分享 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" conte

（十二）easyUI之表單和驗證完成登錄頁面

() 成功 options 表單提交 odi 1-1 java ima 1.4 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

php之表單-2（表單驗證）

eth left cit span dem 讓我但是 cape ren PHP 表單驗證本章節我們將介紹如何使用PHP驗證客戶端提交的表單數據。 PHP 表單驗證在處理PHP表單時我們需要考慮安全性。本章節我們將展示PHP表單數據安全處理

Framework7學習筆記之表單

選項 href docs action put password ide tor XML 一：表單布局基本格式表單布局是通過列表來實現的。 <div class="list-block"> <ul> <!--一個表單

我的HTML總結之表單

技術分享 res 不用 context submit 喜歡 inpu like com 表單是Web中實現交互的重要方法，用於收集用戶信息並提交給服務器。表單中的9大控件 <input type="text" name="key" value="123" r

SpringBoot之表單驗證@Valid

BE index ror ner HR 大小 doctype implement 空格 SpringBoot提供了強大的表單驗證功能實現，給我們省去了寫驗證的麻煩；這裏我們給下實例，提交一個有姓名和年齡的表單添加功能，要求姓名不能為空，年齡必須是不小於18 ；我們先新

Python Tornado初學筆記之表單與模板（一）

too pan ade pin 只需要過濾擴展 python代碼 squeeze Tornado中的表單和HTML5中的表單具有相同的用途，同樣是用於內容的填寫。只是不同的是Tornado中的表單需要傳入到後臺，然後通過後臺進行對模板填充。

ionic-CSS：ionic 表單和輸入框

輸入框 hit col 標簽字段 head wid AS wrapper ylbtech-ionic-CSS：ionic 表單和輸入框 1.返回頂部 1、 ionic 表單和輸入框 list 類同樣可以用於 input 元素。item-in

關於bootstrap中css樣式與自己設置的css樣式相撞問題

找到審查頁面可能網頁設置顯示效果顯示元素 1.在對網頁進行布局前就先將bootstrap包中的東西導入到自己的頁面中去。自己定義的css樣式導入在bootstrap之後，可以起到當類名與bootstrap重復時對bootstrap樣式踐行覆蓋的作用。 2.盡

六、Django之表單和類視圖-Part 4

true abs 不能註意自動跳轉請求偽造 mes direct base 一、表單form 為了接收用戶的投票選擇，我們需要在前端頁面顯示一個投票界面。讓我們重寫先前的polls/detail.html文件，代碼如下： <h1>{{ question.q

JEPLUS之表單特效配置——JEPLUS之表單特效配置

keditor self 操作配置信息關於樹形添加 itl plus 新人筆記之表單特效配置今天對客戶要的項目進行了相關的特效配置，下面再來配置一下加深印象。一、表單布局設計首先在創建的表單中，找到表單設計按照規定的樣式進行排版

CSS樣式之操作屬性一

過程上下左右 radi 同一行間隔文檔普通 cas 單詞 ********css之操作屬性******** 一、文本 1.文本顏色：color 顏色屬性被用來設置文字的顏色顏色是通過CSS最經常的指定：十六進制值 - 如: ＃FF0000 一個RGB值

CSS樣式之補充

fix 如果之前 brush sta line 需要將他 for ********CSS一些常用屬性******* 0.去掉下劃線：text-decoration:none ; 1.加上下劃線： text-decoration: underline; 2.調整文本

Bootstrap全域性CSS樣式之表單

相關推薦