栅格系统的基本使用

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

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>
目录
相关文章
|
5月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
5月前
|
前端开发 JavaScript
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
292 0
|
7月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
79 0
|
7月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
39 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
61 0
|
编解码 前端开发 JavaScript
uniapp瀑布流布局写法
uniapp瀑布流布局写法
214 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置2
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置2
45 0
|
JavaScript 前端开发
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
904 2
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
|
JavaScript 前端开发 安全
轮播图swiper框架的基本使用
轮播图swiper框架的基本使用
272 2
轮播图swiper框架的基本使用
|
前端开发
bootstrap栅格系统的使用 适合初学者
bootstrap栅格系统的使用 适合初学者