Bootstrap学习笔记 22

来源：互联网发布：nginx errorlog 编辑：程序博客网时间：2024/05/21 12:48
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>    <script src="./node_modules/jquery/dist/jquery.min.js"></script>    <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>    <title>Inputs</title>    <script>        function showHTMLContent(showElement, codeElement) {            $(showElement).html($('<div/>').text($(codeElement).html()).html());        }        $(function() {            showHTMLContent('#inputControlsCode', '#inputControls');            showHTMLContent('#checkboxCode', '#checkbox');            showHTMLContent('#radioCode', '#radio');            showHTMLContent('#selectCode', '#select');            showHTMLContent('#staticCode', '#static');            showHTMLContent('#statesCode', '#states');            showHTMLContent('#statesInlineCode', '#statesInline');            showHTMLContent('#sizeCode', '#size');            showHTMLContent('#sizeGroupCode', '#sizeGroup');            showHTMLContent('#columnSizeCode', '#columnSize');            showHTMLContent('#helpTextCode', '#helpText');        });    </script></head><body>    <div class="container">        <h1>Text Inputs</h1>        <h2>代码</h2>        <pre id="inputControlsCode"></pre>        <h2>样式</h2>        <div id="inputControls">            <form role="form">                <div class="form-group">                    <label for="usr">Name:</label>                    <input type="text" class="form-control" id="usr">                </div>                <div class="form-group">                    <label for="pwd">Password:</label>                    <input type="password" class="form-control" id="pwd">                </div>                <div class="form-group">                    <label for="comment">Comment:</label>                    <textarea class="form-control" rows="5" id="comment"></textarea>                </div>            </form>        </div>        <br><br>        <h1>Checkbox</h1>        <h2>代码</h2>        <pre id="checkboxCode"></pre>        <h2>样式</h2>        <div id="checkbox">            <h3>Checkbox Basic</h3>            <form>                <div class="checkbox">                    <label><input type="checkbox" value="">Option 1</label>                </div>                <div class="checkbox">                    <label><input type="checkbox" value="">Option 2</label>                </div>                <div class="checkbox disabled">                    <label><input type="checkbox" value="" disabled>Option 3</label>                </div>            </form>            <h3>Checkbox Inline</h3>            <form role="form">                <label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>                <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>                <label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>            </form>        </div>        <br><br>        <h1>Radio</h1>        <h2>代码</h2>        <pre id="radioCode"></pre>        <h2>样式</h2>        <div id="radio">            <h3>Radio Basic</h3>            <form role="form">                <div class="radio">                    <label><input type="radio" name="optradio">Option 1</label>                </div>                <div class="radio">                    <label><input type="radio" name="optradio">Option 2</label>                </div>                <div class="radio disabled">                    <label><input type="radio" name="optradio" disabled>Option 3</label>                </div>            </form>            <h3>Radio Inline</h3>            <form role="form">                <label class="radio-inline">                    <input type="radio" name="optradio">Option 1                </label>                <label class="radio-inline">                    <input type="radio" name="optradio">Option 2                </label>                <label class="radio-inline">                    <input type="radio" name="optradio">Option 3                </label>            </form>        </div>        <br><br>        <h1>Select</h1>        <h2>代码</h2>        <pre id="selectCode"></pre>        <h2>样式</h2>        <div id="select">            <form role="form">                <div class="form-group">                    <label for="sel1">Select list (select one):</label>                    <select class="form-control" id="sel1">                        <option>1</option>                        <option>2</option>                        <option>3</option>                        <option>4</option>                    </select>                    <br>                    <label for="sel2">Mutiple select list (hold shift to select more than one):</label>                    <select multiple class="form-control" id="sel2">                        <option>1</option>                        <option>2</option>                        <option>3</option>                        <option>4</option>                        <option>5</option>                    </select>                </div>            </form>        </div>        <br><br>        <h1>Static Control</h1>        <h2>代码</h2>        <pre id="staticCode"></pre>        <h2>样式</h2>        <div id="static">            <form class="form-horizontal" role="form">                <div class="form-group">                    <label class="control-label col-sm-2" for="email">Email:</label>                    <div class="col-sm-10">                        <p class="form-control-static">someone@example.com</p>                    </div>                </div>            </form>        </div>        <br><br>        <h1>States</h1>        <h2>代码</h2>        <pre id="statesCode"></pre>        <h2>样式</h2>        <div id="states">            <form class="form-horizontal" role="form">                <div class="form-group">                    <label class="col-sm-2 control-label">Focused</label>                    <div class="col-sm-10">                        <input class="form-control" id="focusedInput" type="text" value="Click to focus...">                    </div>                </div>                <div class="form-group">                    <label for="inputPassword" class="col-sm-2 control-label">Disabled</label>                    <div class="col-sm-10">                        <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>                    </div>                </div>                <fieldset disabled>                    <div class="form-group">                        <label for="disabledTextInput" class="col-sm-2 control-label">Disabled input and select list (Fieldset disabled)</label>                        <div class="col-sm-10">                            <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">                        </div>                    </div>                    <div class="form-group">                        <label for="disabledSelect" class="col-sm-2 control-label"></label>                        <div class="col-sm-10">                            <select id="disabledSelect" class="form-control">                                <option>Disabled select</option>                            </select>                        </div>                    </div>                </fieldset>                <div class="form-group has-success has-feedback">                    <label class="col-sm-2 control-label" for="inputSuccess">Input with success and glyphicon</label>                    <div class="col-sm-10">                        <input type="text" class="form-control" id="inputSuccess">                        <span class="glyphicon glyphicon-ok form-control-feedback"></span>                    </div>                </div>                <div class="form-group has-warning has-feedback">                    <label class="col-sm-2 control-label" for="inputWarning">Input with warning and glyphicon</label>                    <div class="col-sm-10">                        <input type="text" class="form-control" id="inputWarning">                        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>                    </div>                </div>                <div class="form-group has-error has-feedback">                    <label class="col-sm-2 control-label" for="inputError">Input with error and glyphicon</label>                    <div class="col-sm-10">                        <input type="text" class="form-control" id="inputError">                        <span class="glyphicon glyphicon-remove form-control-feedback"></span>                    </div>                </div>            </form>                     </div>        <br><br>        <h1>States Inline</h1>        <h2>代码</h2>        <pre id="statesInlineCode"></pre>        <h2>样式</h2>        <div id="statesInline">            <form class="form-inline" role="form">                <div class="form-group">                    <label for="focusedInput">Focused</label>                    <input class="form-control" id="focusedInput" type="text">                </div>                <div class="form-group">                    <label for="inputPassword">Disabled</label>                    <input class="form-control" id="disabledInput" type="text" disabled>                </div>                <div class="form-group has-success has-feedback">                    <label for="inputSuccess2">Input with success</label>                    <input type="text" class="form-control" id="inputSuccess2">                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>                </div>                <div class="form-group has-warning has-feedback">                    <label for="inputWarning2">Input with warning</label>                    <input type="text" class="form-control" id="inputWarning2">                    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>                </div>                <div class="form-group has-error has-feedback">                    <label for="inputError2">Input with error</label>                    <input type="text" class="form-control" id="inputError2">                    <span class="glyphicon glyphicon-remove form-control-feedback"></span>                </div>            </form>        </div>        <br><br>        <h1>Size</h1>        <h2>代码</h2>        <pre id="sizeCode"></pre>        <h2>样式</h2>        <div id="size">            <form role="form">                <div class="form-group">                    <label for="inputdefault">Default input</label>                    <input class="form-control" id="inputdefault" type="text">                </div>                <div class="form-group">                    <label for="inputlg">input-lg</label>                    <input class="form-control input-lg" id="inputlg" type="text">                </div>                <div class="form-group">                    <label for="inputsm">input-sm</label>                    <input class="form-control input-sm" id="inputsm" type="text">                </div>                <div class="form-group">                    <label for="sel1">Default select list</label>                    <select class="form-control" id="sel1">                        <option>1</option>                        <option>2</option>                        <option>3</option>                        <option>4</option>                    </select>                </div>                <div class="form-group">                    <label for="sel2">input-lg</label>                    <select class="form-control input-lg" id="sel2">                        <option>1</option>                        <option>2</option>                        <option>3</option>                    </select>                </div>                <div class="form-group">                    <label for="sel3">input-sm</label>                    <select class="form-control input-sm" id="sel3">                        <option>1</option>                        <option>2</option>                        <option>3</option>                    </select>                </div>            </form>        </div>        <br><br>        <h1>Size Group</h1>        <h2>代码</h2>        <pre id="sizeGroupCode"></pre>        <h2>样式</h2>        <div id="sizeGroup">            <form class="form-horizontal" role="form">                <div class="form-group form-group-lg">                    <label class="col-sm-2 control-label" for="lg">form-group-lg</label>                    <div class="col-sm-10">                        <input class="form-control" type="text" id="lg">                    </div>                </div>                <div class="form-group form-group-sm">                    <label class="col-sm-2 control-label" for="sm">form-group-sm</label>                    <div class="col-sm-10">                        <input class="form-control" type="text" id="sm">                    </div>                </div>            </form>        </div>        <br><br>        <h1>Column Size</h1>        <h2>代码</h2>        <pre id="columnSizeCode"></pre>        <h2>样式</h2>        <div id="columnSize">            <form role="form">                <div class="form-group">                    <div class="col-xs-2">                        <label for="ex1">col-xs-2</label>                        <input class="form-control" id="ex1" type="text">                    </div>                    <div class="col-xs-3">                        <label for="ex2">col-xs-3</label>                        <input class="form-control" id="ex2" type="text">                    </div>                    <div class="col-xs-4">                        <label for="ex3">col-xs-4</label>                        <input class="form-control" id="ex3" type="text">                    </div>                </div>            </form>        </div>        <br><br><br><br>        <h1>Help Text</h1>        <h2>代码</h2>        <pre id="helpTextCode"></pre>        <h2>样式</h2>        <div id="helpText">            <form role="form">                <div class="form-group">                    <label for="pwd">Password:</label>                    <input type="password" class="form-control" id="pwd" placeholder="Enter password">                    <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>                </div>                <button type="submit" class="btn btn-default">Submit</button>            </form>        </div>        <br><br>    </div></body></html>
查看运行结果
阅读全文
0 0