首页bootstrap怎么写个人中心页面

bootstrap怎么写个人中心页面

时间: 2023-07-14 13:12:00 浏览: 495

Bootstrap是一个强大的前端框架，可以轻松实现个人中心页面。下面是一个简单的示例代码，供您参考： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人中心</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"> <ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"><a href="#">个人信息</a></li> <li role="presentation"><a href="#">修改密码</a></li> <li role="presentation"><a href="#">订单查询</a></li> </ul> </div> <div class="col-md-9"> <h2>个人信息</h2> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="email" class="form-control" id="email" placeholder="请输入邮箱"> </div> <div class="form-group"> <label for="phone">电话</label> <input type="tel" class="form-control" id="phone" placeholder="请输入电话"> </div> <button type="submit" class="btn btn-primary">保存</button> </form> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> ``` 这段代码中，使用了Bootstrap的网格系统将页面分成了左右两栏。左侧是一个导航菜单，右侧是一个表单用于修改个人信息。您可以根据自己的需求进行修改和拓展。

阅读全文