Bootstrap CSS入门初步学习---表单+按钮

留家里哦哦哦

已于 2023-02-28 11:52:41 修改

阅读量457

点赞数 1

分类专栏： Bootstrap学习前端学习路径文章标签： bootstrap html css

于 2021-11-21 15:19:23 首次发布

本文链接：https://blog.csdn.net/qq_46304554/article/details/121454223

版权

在页面制作时，我们往往需要制作一些表单，使用bootstrap制作表单不仅更加快速而且样式也是比较好看的。当然如果想加入其他样式的话，大家可以执行设计css样式。

表单的展示

在这里插入图片描述
部分代码解释：

<form>
            <!--.form-group包裹label与input等控件可以更好排列-->
            <div class="form-group">
            <!--for="exampleInputEmail1"点击这个标签等于点击了id为exampleInputEmail1的元素-->
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
</form>

所有代码展示：

<!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.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-2.1.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <title>Bootstrap表单练习</title>
</head>
<body>
    <div class="container" style="background-color: antiquewhite;">
        <h1 style="text-align: center;">表单练习</h1>
        <form>
            <!--.form-group包裹label与input等控件可以更好排列-->
            <div class="form-group">
            <!--for="exampleInputEmail1"点击这个标签等于点击了id为e

最低0.47元/天解锁文章

留家里哦哦哦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap CSS入门初步学习---表单+按钮

在页面制作时，我们往往需要制作一些表单，使用bootstrap制作表单不仅更加快速而且样式也是比较好看的。当然如果想加入其他样式的话，大家可以执行设计css样式。代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单+按钮</title> <style> body{ padding-top: 50px; } &
复制链接

扫一扫