栅格系统的基本使用

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

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之组件的基本使用及案例演示1
Layui之组件的基本使用及案例演示1
95 0
|
前端开发 JavaScript
Layui之组件的基本使用及案例演示2
Layui之组件的基本使用及案例演示2
82 0
|
4月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
6月前
|
前端开发 UED 容器
【专栏:CSS进阶篇】CSS Grid布局:构建复杂的二维布局
【4月更文挑战第30天】CSS Grid布局是二维布局系统,适用于复杂页面结构,如页眉、主体和侧边栏。通过定义网格线和单元格,能轻松创建行和列。基本语法包括设置容器为grid容器,定义`grid-template-rows`和`grid-template-columns`。高级特性包括命名网格线、网格区域、网格间隙、重复网格线和自动填充。在实际应用中,CSS Grid能有效提升开发效率和用户体验,尤其在响应式设计和复杂布局场景下。
102 0
|
6月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
73 0
|
编解码 前端开发 JavaScript
uniapp瀑布流布局写法
uniapp瀑布流布局写法
207 0
|
JavaScript 前端开发
如何使用 layui 的日期选择器组件?底层原理是什么?
如何使用 layui 的日期选择器组件?底层原理是什么?
360 0
|
JavaScript 前端开发 API
如何使用 layui 的富文本编辑器组件?底层原理是什么?
如何使用 layui 的富文本编辑器组件?底层原理是什么?
569 0
|
JavaScript 前端开发 安全
轮播图swiper框架的基本使用
轮播图swiper框架的基本使用
264 2
轮播图swiper框架的基本使用
|
JavaScript
ElementUI 常用组件使用方法
ElementUI 常用组件使用方法
ElementUI 常用组件使用方法