PAUL

HTML表单源码
使用Bootstrap库HTML代码如下:<!doctype html> <html lang=...
扫描右侧二维码阅读全文
27
2018/11

HTML表单源码

使用Bootstrap库

HTML代码如下:

<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="b4.css">

</head>
<body>

   <!-- 展板 j -->
   <div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-3">人力资源管理平台</h1>
        <p class="lead">XXX 作品 <span class="badge badge-danger">典藏版</span></p>
    </div>
  </div>

  <!-- 容器 -->
  <div class="container-fluid">
    
    <!-- row 12 -->
    <div class="row">
        
        <!-- col -->
        <div class="col-lg-4">
           
            <!-- 卡片 -->
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">添加一个新员工</h4>
                    <!-- 输入框 -->
                        <div class="form-group">
                            <label for="">姓名</label>
                            <input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
                        </div>
                        <div class="form-group">
                            <label for="">手机号</label>
                            <input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
                        </div>
                        <div class="form-group">
                            <label for="">地址</label>
                            <input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
                        </div>
                    <!-- 按钮 -->
                    <button type="button" name="" id="" class="btn btn-primary btn-lg btn-block">创建</button>
                </div>
            </div>

        </div>
        <!-- shift + alt + 下 -->
        <div class="col-lg-8">
            <table class="table">
                <thead>
                    <tr>
                        <!-- ctrl + alt + 下 -->
                        <th>表格行</th>
                        <th>表格行</th>
                        <th>表格行</th>
                        <th>表格行</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>数据</td>
                        <td>数据</td>
                        <td>数据</td>
                        <td>数据</td>
                    </tr>
                    <tr>
                        <td>数据</td>
                        <td>数据</td>
                        <td>数据</td>
                        <td>数据</td>
                    </tr>
                    <tr>
                        <td>数据</td>
                        <td>数据</td>
                        <td>数据</td>
                        <td>数据</td>
                    </tr>
                    <tr>
                        <td>数据</td>
                        <td>数据</td>
                        <td>数据</td>
                        <td>数据</td>
                    </tr>

                </tbody>
            </table>
        </div>

    </div>

 </div>
  
 </body>
 </html>


CCS代码是从Bootstrap下载出来的,比较多。不放上来了,放网盘,需要的自己下载。
下载地址:点击下载

Last modification:April 23rd, 2019 at 05:23 pm
如果觉得我的文章对您有用,请随意赞赏

Leave a Comment

6 comments

  1. 大佬

    过来偷一下。

    1. PAUL
      @大佬

      尽情的偷吧

  2. 小可爱

    牛逼

    1. 凌轩
  3. 咸鱼

    拿走不谢。嘻嘻

    1. 凌轩
      @咸鱼

      .....