BootStrap初体验(静态页面案例)

最新推荐文章于 2025-03-30 16:15:38 发布

hxgbieshuomeibanfa

最新推荐文章于 2025-03-30 16:15:38 发布

阅读量1k

点赞数 1

分类专栏：前端基础文章标签：前端 css html5

本文链接：https://blog.youkuaiyun.com/weixin_63997211/article/details/124079915

版权

前端基础专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何利用BootStrap的栅格系统和媒体对象创建网页内容界面，以及如何构建用户登录界面。同时，展示了如何借助Font-Awesome图标库丰富网页视觉元素，为图标添加颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当学完了css的基础之后我们直接写各式各样的盒子再布局显然是非常麻烦的，我们可以通过BootStrap上面现有的代码来帮助我们快速进行页面布局

栅格系统示例

我们可以利用BootStrap里面的栅格系统，再你定义一个大盒子之后，将大盒子里面的区域细分

栅格系统只是一个实例，里面有很多样式和组件

网页内容界面

我们可以利用里面的媒体对象，栅格系统，媒体对象，直接创建两个部分

里面的出来head中引入bootstrap之后的div中的内容都是复制粘贴，第一个class为表头，其中<div class="container clearfix">是创建了一个居中清除浮动的大盒子把下面的栅格系统放进去

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugsin/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>

<body>
<div class="navbar navbar-default">...
</div>

<div class="container clearfix">......
    <div class="col-sm-9">...
    <div>
    <div class="col-sm-3">...
    </div>
</body>

输出效果

用户登录界面

下面就是简单引用了表格

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="用户登录系统" href="static/plugsin/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        .hu{
        width: 500px;
        height:500px;
        margin-left:auto;
        margin-right:auto;
        margin-top:100px;
        /* background-color:pink; */
        }
        h1 {
        text-align:center;
        }
    </style>
</head>
<body>
<div class="hu">
    <h1 class="huhu">用户登录系统</h1>
    <form>
    <div class="form-group">...
    </div>
    <div class="form-group">...
    </div>
    <div class="form-group">...
    </div>
    <div class="checkbox">...
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>
</body>