bootstrap表單樣式

時間  2019-12-06
標籤 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">
</head>
<body>
    <form role="form" class="form-inline"><!--表單變成內聯，寬度自適應-->
    <div class="form-group">
        <label>密碼</label>
        <input type="password" name="" class="form-control" placeholder="Enter password">
    
    </div>
        <div class="form-group">
            <label>email</label>
            <input type="email" name="" class="form-control" placeholder="Enter email">
            <button type="submmit">提交</button>css

        </div>
        <div class="form-group">
            <label class="sr-only">選擇文件</label>　<!--lable添加class　sr-only　能夠隱藏lable-->
            <input type="file" name="">
            <p class="help-block">選擇你須要的文件</p>
        
        </div>html


    </form>
    <form role="form"　class="form-horizontal">
        <div class="form-group">
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" name="" class="form-control" placeholder="email"><!--加類form-control帶圓角效果-->
                </div>
    
    
        </div>
        <div class="form-group">
                <label class="col-sm-2 control-label">password</label>
                <div class="col-sm-10">
                    <input type="password" name="" placeholder="password">
                </div>
    
    
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2"><!--添加類名col-md-offset-2向右移動兩個位子-->
                <div class="checkbox">
                    <label>bootstrap

                        <input type="checkbox" name="">記住密碼
                    </label>orm

                </div>htm


            </div>input


        </div>    
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submmit" class="btn btn-default">登陸</button>it

            </div>form


        </div>    
    
    </form>
</body>
</html>class

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