Open cccreator opened 6 years ago
Bootstrap教程传送门：http://www.runoob.com/bootstrap/bootstrap-forms.html
bootstrap提供了下列类型的表单布局：垂直表单（默认）、内敛表单、水平表单。 垂直或基本表单，创建基本表单的基本步骤
bootstrap提供了下列类型的表单布局：垂直表单（默认）、内敛表单、水平表单。
向父
把标签和控件放在一个带有class.form-group 的div中，这是获取最佳间距必需的；
class.form-group
向所有的文本元素、、<select>中添加 class="form-control"；</p> </li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/cccreator"><img src="https://avatars.githubusercontent.com/u/28735638?v=4" />cccreator</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p><strong>接上</strong></p> <pre><code><form role="form"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label for="inputfile">文件输入</label> <input type="file" id="inputfile"> <p class="help-block">这里是块级帮助文本的实例。</p> </div> <div class="checkbox"> <label> <input type="checkbox">请打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form></code></pre> <p>效果图： <img src="https://user-images.githubusercontent.com/28735638/38003751-a20d401a-326b-11e8-81c6-d620cf836cdd.jpg" alt="1" /></p> <h3>内敛表单</h3> <p><em>如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，需要向<code><form></code>标签添加<code>class.form-inline</code></em></p> <p>实例代码：</p> <pre><code><form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label class="sr-only" for="inputfile">文件输入</label> <input type="file" id="inputfile"> </div> <div class="checkbox"> <label> <input type="checkbox">请打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form></code></pre> <p>效果图： <img src="https://user-images.githubusercontent.com/28735638/38003756-a81b06f4-326b-11e8-8df8-565f75aec164.jpg" alt="1522199461 1" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/cccreator"><img src="https://avatars.githubusercontent.com/u/28735638?v=4" />cccreator</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <h2>bootstrap模态框（modal）</h2> <p>实例代码：</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <h2>创建模态框（Modal）</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button> <!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> </div> <div class="modal-body"> 在这里添加一些文本 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary"> 提交更改 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> </html></code></pre> <p>效果： <img src="https://user-images.githubusercontent.com/28735638/38004210-c1cb1d26-326d-11e8-8c93-6e1daef67eaa.png" alt="default" /> <img src="https://user-images.githubusercontent.com/28735638/38004219-c8dc0b2a-326d-11e8-8bc4-e876ccbace39.png" alt="default" /> 其中</p> <ul> <li> <p><code>.modal</code>用于标注<div>内容为模态框，<code>.fade class</code>当模态框切换时，它会引起内容淡入淡出；</p> </li> <li> <p>对于按钮触发模态框，有六种定义的按钮样式，每种样式服务于它们各自的语义目的： <img src="https://user-images.githubusercontent.com/28735638/38004433-d28ccf5a-326e-11e8-9bb5-a1754c530499.png" alt="default" /></p> <pre><code><button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn-link">Link</button></code></pre> <p><em>对于一些按钮的样式，见<a href="http://wiki.jikexueyuan.com/project/bootstrap4/components/buttons/">http://wiki.jikexueyuan.com/project/bootstrap4/components/buttons/</a></em></p> </li> <li> <p>bootstrap定义了三种不同尺寸的按钮：btn-log 设置大尺寸按钮， btn-sm 和 btn-xs 设置带有不同尺寸的按钮;</p> </li> </ul> <p>-<code>data-toggle="modal"</code>用于打开模态框窗口；</p> <ul> <li> <p><code>data-target="#模态框id"</code>；</p> </li> <li> <p><code>aria_labelledby="#模态框标题"</code>用于引用模态框标题；</p> </li> <li> <p><code>aria-hidden="true"</code>用于保持模态框隐藏，直到触发时显示；</p> </li> <li> <p><code>class="close"</code>用于模态窗口设置关闭按钮的样式；</p> </li> <li> <p><code>data-dismiss="modal"</code>用于关闭模态窗口；</p> </li> <li> <p><code>class="model-body"</code>用于设置模态框主体样式；</p> </li> <li> <p><code>class="model-footer"</code>用于设置模态框底部样式；</p> </li> </ul> <p>-<code>role="dialog"</code>用于指定模态框为对话框；</p> <ul> <li> </li> </ul> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
Bootstrap
Bootstrap教程传送门：http://www.runoob.com/bootstrap/bootstrap-forms.html
bootstrap表单
向父
把标签和控件放在一个带有
class.form-group的div中，这是获取最佳间距必需的；向所有的文本元素、