Day-12bootstrap输入框组、自定义表单

it2024-12-03 3

输入框组、自定义表单

输入框组1. 基础输入框2. 输入框的大小（.input-group-lg / .input-group-sm）3. 多个输入框和文本4. 复选框与单选框5. 输入框添加按钮组6. 设置下拉菜单7. 输入框组标签自定义表单1. 自定义复选框2. 自定义单选框3. 自定义控件显示在同一行（ .custom-control-inline ）4. 自定义选择菜单5. 自定义滑块控件6. 自定义文件上传控件

输入框组

1. 基础输入框

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。最后，我们还需要使用 .input-group-text 类来设置文本的样式。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <form action="#" method="post"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" name="username" id="username" placeholder="Username" /> </div> <div class="input-group mb-3"> <input type="text" class="form-control" name="email" id="mail" placeholder="Your Email" /> <div class="input-group-append"> <span class="input-group-text"> @163.com </span> </div> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </body> </html>

运行程序：

2. 输入框的大小（.input-group-lg / .input-group-sm）

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <form> <div class="input-group mb-3 input-group-sm"> <div class="input-group-prepend"> <span class="input-group-text">Small</span> </div> <input type="text" class="form-control" /> </div> </form> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Default</span> </div> <input type="text" class="form-control" /> </div> </form> <form> <div class="input-group mb-3 input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text">Large</span> </div> <input type="text" class="form-control" /> </div> </form> </div> </body> </html>

运行结果：

3. 多个输入框和文本

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3">  <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Name</span> </div> <input type="text" class="form-control" placeholder="First Name" /> <input type="text" class="form-control" placeholder="Last Name" /> </div> </form>  <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">One</span> <span class="input-group-text">Two</span> <span class="input-group-text">Three</span> </div> <input type="text" class="form-control"> </div> </form> </div> </body> </html>

运行结果：

4. 复选框与单选框

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" /> </div> </div> <input type="text" class="form-control" placeholder="游泳" /> </div> </form> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" /> </div> </div> <input type="text" class="form-control" placeholder="读书" /> </div> </form> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" /> </div> </div> <input type="text" class="form-control" placeholder="记住密码" /> </div> </form> </div> </body> </html>

运行结果：

5. 输入框添加按钮组

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <div class="input-group mb-3"> <div class="input-group-prepend"> <button type="button" class="btn btn-outline-secondary">基础按钮</button> </div> <input type="text" class="form-control" placeholder="文本" /> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search"/> <div class="input-group-append"> <button type="submit" class="btn btn-success">Go</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="balabala"/> <div class="input-group-append"> <button class="btn btn-primary" type="button">OK</button> <button class="btn btn-danger" type="button">Cancel</button> </div> </div> </div> </body> </html>

运行结果：

6. 设置下拉菜单

输入框中添加下拉菜单不需要使用 .dropdown 类。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <form> <div class="input-group mt-3 mb-2"> <div class="input-group-prepend"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">选择网站</button> <div class="dropdown-menu"> <a href="https://www.taobao.com" class="dropdown-item">淘宝</a> <a href="https://www.baidu.com" class="dropdown-item">百度</a> <a href="https://www.jd.com" class="dropdown-item">京东</a> </div> </div> <input type="text" class="form-control" placeholder="网站地址" /> </div> </form> </div> </body> </html>

运行结果：

7. 输入框组标签

在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应，点击标签后可以聚焦输入框：代码如下：

运行结果：

自定义表单

(Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。)

1. 自定义复选框

如果要自定义一个复选框，可以设置 < div > 为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该 < div > 里头，然后复选框设置为 type=“checkbox”，类为 .custom-control-input。复选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配复选框的 id。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <form> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck" name="example" /> <label class="custom-control-label" for="customCheck">自定义复选框</label> </div> <input type="checkbox" id="defaultCheck" name="example2" /> <label for="defaultCheck">默认复选框</label> <br> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </body> </html>

运行结果：

2. 自定义单选框

如果要自定义一个单选框，可以设置 < div > 为父元素，类为 .custom-control 和 .custom-radio，单选框作为子元素放在该 < div > 里头，然后单选框设置为 type=“radio”，类为 .custom-control-input。单选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配单选框的 id。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <form> <div class="custom-control custom-radio mb-3"> <input type="radio" class="custom-control-input" id="customRadio" name="example" /> <label class="custom-control-label" for="customRadio">自定义单选框</label> </div> <input type="radio" id="defaultRadio" name="example2" /> <label for="defaultRadio">默认单选框</label> <br> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </body> </html>

运行结果：

3. 自定义控件显示在同一行（ .custom-control-inline ）

我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件，这样自定义表单控件就能显示在同一行

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <form> <div class="custom-control custom-radio mb-3 custom-control-inline"> <input type="radio" class="custom-control-input" id="customRadio1" name="example" /> <label class="custom-control-label" for="customRadio1">自定义单选框</label> </div> <div class="custom-control custom-radio mb-3 custom-control-inline"> <input type="radio" class="custom-control-input" id="customRadio2" name="example" /> <label class="custom-control-label" for="customRadio2">自定义单选框</label> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </body> </html>

运行结果：

4. 自定义选择菜单

创建自定义选择菜单可以在元素上添加 .custom-select 类:比如，可以使用 .custom-select-sm、.custom-select-lg 来设置菜单的大小。代码如下：

运行结果：

5. 自定义滑块控件

我们可以在 input 为 type=“range” 的输入框中添加 .custom-range 类来设置自定义滑块控件。

代码如下：

运行结果：

6. 自定义文件上传控件

我们可以在父元素添加 .custom-file 类，然后在 input 设置为 type=“file” 并添加 .custom-file-input:上传控件的文本使用 label 标签，标签使用 .custom-file-label 类，label 的 for 属性值需要匹配上传控件 id。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <form> <p>自定义上传文件样式:</p> <div class="custom-file mb-3"> <input type="file" class="custom-file-input" id="customFile" name="filename"> <label class="custom-file-label" for="customFile">选择文件</label> </div> <p>默认上传文件样式:</p> <input type="file" id="myFile" name="filename2"> </form> </div> </body> </html>

运行结果：

最新回复(0)