留言板——提交界面

摘要: Bootstrap+PHP开发留言板之提交界面

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



主要代码：

<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 标签，屏幕阅读器将无法正确识别。