栅格系统的基本使用

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

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>
目录
相关文章
|
7月前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
174 4
|
5月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
6月前
|
前端开发 开发者 容器
CSS进阶-Flexbox高级布局技巧
【6月更文挑战第16天】Flexbox是CSS3的布局模块,简化响应式设计和复杂多列布局。文章探讨了Flex容器与项目属性的区分、垂直居中、防止元素溢出等常见问题及解决方案。此外,还分享了等宽不同高列、圣杯布局和自适应间距等高级技巧。通过示例展示了如何创建垂直居中布局,强调实践和理解核心概念是掌握Flexbox的关键。
106 10
|
7月前
|
移动开发 小程序 JavaScript
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
837 1
|
7月前
|
移动开发 小程序 API
uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法
uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法
562 1
|
7月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
80 0
|
7月前
|
前端开发 容器
|
编解码 前端开发 JavaScript
uniapp瀑布流布局写法
uniapp瀑布流布局写法
227 0
|
前端开发 容器
ElementUI中栅格布局的实现原理
在ElementUI中,Row和Col组件是栅格布局的核心,它们的实现基于flexbox和CSS网格布局。
|
Web App开发 前端开发 开发者
【重学CSS】图文并茂!一次性搞懂 Grid 布局,实现“布局自由”~(下)
【重学CSS】图文并茂!一次性搞懂 Grid 布局,实现“布局自由”~(下)