bootstrap基础

全局样式

辅助类

<p class="text-center">内容居中</p>

表单

<form class="" method="post" action="http://127.0.0.1:8000/signup">
                <div class="form-group">
                    <label for="input_name">用户名</label>
                    <input class="form-control" type="text" name="name" id="input_name">
                </div>
                <div class="form-group">
                    <label for="input_password">密码</label>
                    <input class="form-control" type="password" name="password" id="input_password">
                </div>
                <div class="form-group">
                    <label for="input_password_again">确认密码</label>
                    <input class="form-control" type="password" name="password_again" id="input_password_again">
                </div>
                <div class="form-group">
                    <label for="input_gender">性别</label>
                    <select class="form-control" name="gender" id="input_gender">
                        <option value="m">男</option>
                        <option value="f">女</option>
                        <option value="x">保密</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="input_avator">头像</label>
                    <input class="form-control" type="file" name="avator" id="input_avator">
                </div>
                <div class="form-group" name="avator">
                    <label for="input_intro">个人简介</label>
                    <textarea class="form-control" rows="5" cols="38" name="intro" id="input_intro"></textarea>
                </div>
            </form>

常用组件

jumbotron

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>