码迷,mamicode.com
首页 > 其他好文 > 详细

快速设计表单样式

时间:2015-08-28 19:20:07      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<style>
.outdiv{
width:600px;height:auto;margin-left: auto;margin-right: auto;background-color:#B0E0E6;padding:30px;
}
.innerdiv{
width:500px;height:auto;margin-left: auto;margin-right: auto;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei
}
</style>
<div class="outdiv">
    <div class="innerdiv">
    

 
 
 
  <form class="form-horizontal">
    <fieldset>
      <div id="legend" class="">
        <legend class="">添加内容</legend>
      </div>
    <div class="control-group">

          <!-- Text input-->
          <label class="control-label" for="input01">文章标题:</label>
          <div class="controls">
            <input placeholder="请输入文章标题" class="input-xlarge" type="text">
            <p class="help-block"></p>
          </div>
        </div>

   

    <div class="control-group">

          <!-- Select Multiple -->
          <label class="control-label">文章分类:</label>
          <div class="controls">
            <select class="input-xlarge" multiple="multiple">
      <option>新闻</option>
      <option>农业</option>
      <option>三农</option></select>
          </div>
        </div>

    <div class="control-group">

          <!-- Textarea -->
          <label class="control-label">文章正文:</label>
          <div class="controls">
            <div class="textarea">
                  <textarea type="" class=""> </textarea>
            </div>
          </div>
        </div>

    <div class="control-group">
          <label class="control-label">提交文章:</label>

          <!-- Button -->
          <div class="controls">
            <button class="btn btn-success">确认提交</button>
          </div>
        </div>

    </fieldset>
  </form>

<!--http://www.bootcss.com/p/bootstrap-form-builder/#4-->


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

快速设计表单样式

标签:

原文地址:http://www.cnblogs.com/hellowzd/p/4767016.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!