Bootstrap CSS——表單(二)

學習記錄(表單支持的各種控件)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表單支持的控件</title>
    <!--<link rel="stylesheet" href="bootstrap.min.css">-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
    <form role="form">
        <!--輸入框-->
        <input type="text" class="form-control">
        <hr>

        <!--文本域-->
        <textarea class="form-control" rows="5">Hello</textarea>
        <hr>

        <!--複選、多選按鈕-->
        <div class="checkbox">
            <label>
                <input type="checkbox" value="">
                橘子
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="">
                蘋果
            </label>
        </div>
        <hr>

        <!--單選按鈕,需指定相同的name-->
        <div class="radio">
            <label>
                <input name="optionsRadios" type="radio" checked></label>
        </div>
        <div class="radio">
            <label>
                <input name="optionsRadios" type="radio" checked></label>
        </div>
        <hr>

        <!--下拉列表 multiple可以讓選項全部在表單中出現-->
        <select multiple class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>

        <!--靜態控件-->
        <!--p 添加form-control-static-->
        <p class="form-control-static">請按照我的格式輸入:[email protected]</p>

        <!--焦點狀態-->
        <!--不允許使用狀態 disabled
        如果要使整個表單都處於該狀態,則代碼如下:
        <form role="form">
            <fieldset disabled>
                表單內容
            </fieldset>
        </form>
        -->
        <input class="form-control" type="text" placeholder="hello" disabled>

        <!--只讀狀態 readonly-->
        <input class="form-control" type="text" readonly>

        <!--輸入結果狀態-->
        <div class="form-group has-warning">
            <label>警告</label>
            <input class="form-control" type="text">
        </div>
        <div class="form-group has-success">
            <label>成功</label>
            <input class="form-control" type="text">
        </div>
        <div class="form-group has-error">
            <label>失敗</label>
            <input class="form-control" type="text">
        </div>
        <hr>


        <!--添加圖標-->
        <div class="form-group has-warning has-feedback col-xs-5">
            <label>警告</label>
            <input class="form-control" type="text">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        <div class="form-group has-success">
            <label>成功</label>
            <input class="form-control" type="text">
        </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>

        <!--控制尺寸,柵格系統-->
        <!--輔助文本-->
    </form>
</body>
</html>
發佈了34 篇原創文章 · 獲贊 3 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章