栅格系统的基本使用

简介: 使用栅格系统制作一个登录页面

image.png

<div class="container">

        <fieldset>
            <form action="" method="POST">
                <legend>登录</legend>
                <div class="row">
                    <div class="col-md-offset-2">
                        <div class="form-group">
                            <label for="">用户名</label>
                            <input type="text" class="form-control" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="">密码</label>
                            <input type="password" class="form-control" placeholder="请输入密码">
                        </div>
                        <div class="cekcbox">
                            <label for=""><input type="checkbox">记住密码</label>
                        </div>
                        <button type="submit" style="color : white" class="btn btn-danger btn-block">登录</button>
                    </div>
                </div>
            </form>
        </fieldset>
    </div>
目录
相关文章
|
前端开发 JavaScript
Layui之组件的基本使用及案例演示2
Layui之组件的基本使用及案例演示2
70 0
|
前端开发 JavaScript
Layui之组件的基本使用及案例演示1
Layui之组件的基本使用及案例演示1
85 0
|
2月前
|
前端开发 JavaScript
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
162 0
|
4月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
64 0
|
JavaScript 前端开发
如何使用 layui 的日期选择器组件?底层原理是什么?
如何使用 layui 的日期选择器组件?底层原理是什么?
350 0
|
JavaScript 前端开发 API
如何使用 layui 的富文本编辑器组件?底层原理是什么?
如何使用 layui 的富文本编辑器组件?底层原理是什么?
538 0
|
JavaScript 前端开发
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
832 2
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
|
JavaScript 前端开发 安全
轮播图swiper框架的基本使用
轮播图swiper框架的基本使用
255 2
轮播图swiper框架的基本使用
|
JavaScript
ElementUI 常用组件使用方法
ElementUI 常用组件使用方法
ElementUI 常用组件使用方法
|
前端开发
bootstrap栅格系统的使用 适合初学者
bootstrap栅格系统的使用 适合初学者