留言板——提交界面

       这一节主要为右侧提交界面的设计。

      主要代码：

<div class="container">

  <div class="starter-template">
    <h1>留言板</h1>
  </div>
	  
  <div class="col-lg-6">
    <h2>这里是留言板列表</h2>
  </div>
	  
  <div class="col-lg-6">
    <form role="form">
      <label for="inputName" class="sr-only">Name</label>
      <input type="text" name="inputName" class="form-control" placeholder="Name" maxlength="20" required autofocus>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" name="inputEmail" class="form-control" placeholder="Email address" maxlength="80" required>
      <label for="inputComment" class="sr-only">Comment</label>
      <textarea class="form-control" name="inputComment" rows="5" placeholder="Comment" maxlength="300" required></textarea>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
    </form>
  </div>
	  
</div><!-- /.container -->

       col-lg-6：Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕尺寸的增加，系统会自动分为最多12列。这里我们左边的列表占6列，右边的表单占6列，当你缩小浏览器窗口时，右侧的表单就会自动漂浮到左侧列表的下方。

       sr-only：可以隐藏表单的标签，如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。

转载于:https://my.oschina.net/jjyhll/blog/502484