BootStrap应用实例学习笔记

最新推荐文章于 2022-05-02 12:20:37 发布

VIP文章 geekun

最新推荐文章于 2022-05-02 12:20:37 发布

阅读量3.8k

点赞数 3

分类专栏：前端文章标签： bootstrap 应用学习笔记

本文链接：https://blog.csdn.net/geekun/article/details/51325516

版权

第二次学习bootstrap了，这次主要以实际用例为主，做一下总结。

51CTO课程链接:BootStrap零基础学习实战视频课程

Bootstrap官方文档

1. 登陆表单

在bootstrap中，大量使用div标签控制层级关系，使用class属性控制样式表现。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登陆</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="container">
            <h1 class="page-header">用户登录</h1>
            <form action="#" method="post" class="form-horizontal">
                <div class="form-group">
                    <div class="col-md-5">
                        <div class="input-group">
                            <div class="input-group-addon">邮箱</div>
                            <input type="text" class="form-control" placeholder="Email"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-5">
                        <div class="input-group">
                            <div class="input-group-addon">密码</div>
                            <input type="password" class="form-control" placeholder="PassWord"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-5">
                        <a class="btn btn-primary" href="#">登陆</a>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>

2. 基本导航栏

<nav class="nav navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Logo</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <

最低0.47元/天解锁文章

geekun

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
BootStrap应用实例学习笔记

第二次学习bootstrap了，这次主要以实际用例为主，做一下总结。51CTO课程链接:BootStrap零基础学习实战视频课程Bootstrap官方文档1. 登陆表单在bootstrap中，大量使用div标签控制层级关系，使用class属性控制样式表现。<!DOCTYPE html><html> <head> <meta charset="UTF-8">
复制链接

扫一扫