Bootstrap 表單樣式二

時間  2019-11-21
標籤 bootstrap 表單 樣式 欄目 Bootstarp 简体版
原文   原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">css

</head>
<body>
<!--在表單中添加fieldset disabled整個表單默認禁用-->
<!-- <fieldset>
    <form role="form">
        <input type="text" name="" class="form-control">
        <textarea class="form-control" rows="5">Hello</textarea>html

        <div class="checkbox">
            <label>
                <input type="checkbox" name="" value="">
                吃蘋果
            </label>ios


        </div>
        <div class="checkbox">複選框
            <label>
                <input type="checkbox" name="" value="">
                吃香焦
            </label>bootstrap


        </div>
        <div class="radio">單選框
            <label>
                <input type="radio" name="radios" checked>
                男
            </label>spa


        </div>
        <div class="radio">
            <label>
                <input type="radio" name="radios" checked>
                女
            </label>orm


        </div>
        <select multiple class="form-control">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>htm

        </select>
        <p>請按照個人格式輸入:hello@163.com</p>
        <input type="text" name="" class="form-control" placeholder="hello" disabled="">ip

<!--數值禁用-->
        <input type="text" name="" class="form-control" readonly="">
        只讀
        </fieldset> rem

            </form>-->
    
        <form role="form">
            <div class="form-group has-warning has-feedback col-xs-5"><!--警告-->
            <!--col-xs-5柵格控制大小-->
                <label>用戶ing</label>
                <input type="text" name="" class="form-control">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                input

            </div>
            <div class="form-group has-success has-feedback"><!--成功-->
                <label>用戶ing</label>
                <input type="text" name="" class="form-control">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>


            </div>
            <div class="form-group has-error has-feedback"><!--錯誤-->
                <label>用戶ing</label>
                <input type="text" name="" class=" form-control">
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>


            </div>

<!--可添加自定義組件 父元素添加類has-feedback　空標籤添加類名爲代碼+空格+form-control-feedback-->

    

    </form> </body> </html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程