bootstrap 3 中表單元素的寫法 ---- 重點是 input file 元素的

時間 2019-11-17

標籤 bootstrap 表單元素寫法重點 input file 欄目 Bootstarp 简体版

原文原文鏈接

咱們知道file元素，由於有許多的插件能夠使用，每每咱們不須要寫樣式，可是若是要求咱們本身寫樣式（利用bootstrap 3）實現一個file極簡樣式如何寫呢？css

下面咱們先來看看整個表單的樣子！html

重點關注頭像html5

當點擊頭像中瀏覽觸發file選擇！jquery

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
        <title>表單樣式</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>
            
        </style>
    </head>
    <body>
        <div class="container">
            <form action="#">
                <div class="form-group">
                    <label class="control-label" for="username">用戶名</label>
                    <input type="text" name="username" id="username" placeholder="請輸入用戶名" class="form-control">
                    <p class="help-block">消息提示</p>
                </div>
                <div class="form-group has-success">
                    <label class="control-label" for="password">密碼</label>
                    <input type="text" name="password" id="password" placeholder="請輸入密碼" class="form-control">
                    <p class="help-block">消息提示</p>
                </div>
                <div class="form-group">
                    <label class="control-label" for="face">頭像</label>
                    <div class="input-group">
                        <input type="text" class="form-control view-result" placeholder="請選擇圖片" aria-describedby="view-2">
                        <span class="input-group-addon btn btn-default view-file" id="view-2">瀏 覽</span>
                    </div>
                    <input type="file" name="face" id="face" class="btn btn-danger hide">
                    <p class="help-block">消息提示</p>
                </div>
                <div class="form-group">
                    <div class="checkbox-inline"><label><input type="checkbox">Parents</label></div>
                    <div class="checkbox-inline"><label><input type="checkbox">Examples</label></div>
                    <div class="checkbox-inline"><label><input type="checkbox">Books</label></div>
                </div>
                <div class="form-group">
                    <div class="checkbox"><label><input type="checkbox">Parants</label></div>
                    <div class="checkbox"><label><input type="checkbox">Examples</label></div>
                    <div class="checkbox"><label><input type="checkbox">Books</label></div>
                </div>
                <div class="form-group">
                    <div class="radio"><label><input name="plural" type="radio">Parants</label></div>
                    <div class="radio"><label><input name="plural" type="radio">Examples</label></div>
                    <div class="radio"><label><input name="plural" type="radio">Books</label></div>
                </div>

                <div class="from-group">
                    <input type="submit" value="Submit" class="btn btn-primary" />
                    <input type="reset" value="Reset" class="btn btn-danger" />

                </div>
            </form>
        </div>
        
        <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="../code/js/holder.min.js"></script>
        <script src="../code/js/application.js"></script>
        <script>
            $(function () {
                $(".view-file").click(function () {
                    $(this).parents('.form-group').find("[type='file']").trigger('click');
                });
                $("[type='file']").change(function () {
                    var value = this.value;
                    $(this).parents(".form-group").find(".view-result").val(value);
                });
            });
        </script>
    </body>
</html>