BootStrap后台管理常用文档存档

举报
红目香薰 发表于 2022/06/26 20:10:30 2022/06/26
【摘要】 ​ ​编辑<!DOCTYPE html><html lang="en"><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...

 编辑

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
   <!-- 应用组-->
   <style>
       .radio,.checkbox{
           width: 20%;
           display: inline;
           vertical-align: middle;
           border: none;
       }
   </style>
  <form action="#" method="post">
    <table align="center" width="400px">
        <tr>
            <td>信息:</td>
            <td colspan="6"><input type="text" placeholder="请输入信息" name="userName" class="form-control"/></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
             <label for="man">男</label>   
             <input id="man" type="radio" value="男" name="sex" class="form-control radio" title="男" checked/></td>
            <td>
             <label for="women">女</label>   
                <input id="women" type="radio" value="女" name="sex" class="form-control radio"/></td>
        </tr>
        <tr>
            <td>
             爱好:
            </td>
            <td>
             <label for="eat">吃</label>   
             <input id="eat" type="checkbox" value="吃" name="like" class="form-control checkbox" checked/></td>
            </td>
            <td>
             <label for="he">喝</label>   
             <input id="he" type="checkbox" value="吃" name="like" class="form-control checkbox"/></td>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
             <label for="play">玩</label>   
             <input id="play" type="checkbox" value="吃" name="like" class="form-control checkbox" checked/></td>
            </td>
            <td>
             <label for="happy">乐</label>   
             <input id="happy" type="checkbox" value="吃" name="like" class="form-control checkbox"/></td>
            </td>
        </tr>
        <tr>
            <td>民族</td>
            <td colspan="5">
                 <select class="form-control">
                     <optgroup label="汉族">
                         <option>汉族男人</option>
                         <option>汉族女人</option>
                     </optgroup>
                     <optgroup label="少数民族">
                         <option selected>壮族</option>
                         <option>苗族</option>
                         <option>傣族</option>
                         <option>仫佬族</option>
                         <option>土家族</option>
                         <option>瑶族</option>
                         <option>毛族</option>
                     </optgroup>
                 </select>
            </td>
        </tr>
        <tr>
            <td>日期选择</td>
            <td colspan="5">
                <input type="date" class="form-control"/>
            </td>
        </tr>
        <tr>
         <td>简介</td>
         <td colspan="5">
             <textarea class="form-control" placeholder="请输入简介"></textarea>
         </td>
     </tr>
     <tr>
         <td>头像</td>
         <td colspan="5">
             <input type="file" class="form-control"/>
         </td>
     </tr>
    </table>
  </form>
</body>
</html>

 编辑


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。