bootstrap前端框架

什么是Bootstrap框架？

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

学习网站:
- 官方中文文档: https://v3.bootcss.com/
- 菜鸟教程案例: http://www.runoob.com/bootstrap/bootstrap-tutorial.html

使用Bootstrap前首先要安装模块：
官网下载bootstrap进行解压安装使用。
主要使用模块分别为：

css
fonts
js

推荐下载地址:https://v3.bootcss.com

下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

Bootstrap 源码
Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下：
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
其中，less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。

bootstrap应用实例——编写网站登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--倒入本地的BOotstrap样式, 也可以倒入网络上的；-->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        .navbar{
            font-size: 130%;
            background: whitesmoke;
            margin-top: 10px;
            padding-top: 5px;
            box-shadow: 2px  2px 2px 2px lightgray;
            height: 60px;



        }


    </style>

</head>
<body>


<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Todo</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">主页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">监控</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">电影</a></li>

            </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<!--<button type="button" class="btn btn-danger">失败</button>-->
<!--实现登录界面-->
<div class="container">
    <div class="col-lg-4 col-lg-offset-4" style="margin-top: 50px">

        <h1>
            登录
            <small>
                没有账号？
                <a href="#">注册</a>
            </small>

        </h1>
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">用户名</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox"> 记住密码
                </label>
            </div>
            <button type="submit" class="btn btn-success btn-block">登录</button>
        </form>


    </div>


    <!--导入外部的js样式;-->
    <!--<script href="js/bootstrap.js"></script>-->
    <!--<script href="js/npm.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <!--导入jQuery-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
    </script>
</body>
</html>

bootstrap前端框架

bootstrap应用实例——编写网站注册界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--倒入本地的BOotstrap样式, 也可以倒入网络上的；-->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        .navbar{
            font-size: 130%;
            background: whitesmoke;
            margin-top: 10px;
            padding-top: 5px;
            box-shadow: 2px  2px 2px 2px lightgray;
            height: 60px;

        }


    </style>

</head>
<body>


<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Todo</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">主页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">监控</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">电影</a></li>

            </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<!--<button type="button" class="btn btn-danger">失败</button>-->
<!--实现登录界面-->
<div class="container">
    <div class="col-lg-4 col-lg-offset-4" style="margin-top: 50px">

        <h1>
            注册
            <small>
                已有帐号
                <a href="#">登录</a>
            </small>

        </h1>
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">用户名</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox"> 记住密码
                </label>
            </div>
            <button type="submit" class="btn btn-success btn-block">注册</button>
        </form>

    </div>


    <!--导入外部的js样式;-->
    <!--<script href="js/bootstrap.js"></script>-->
    <!--<script href="js/npm.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <!--导入jQuery-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
    </script>
</body>
</html>

bootstrap前端框架

什么是Bootstrap框架？

bootstrap应用实例——编写网站登陆界面

bootstrap应用实例——编写网站注册界面

相关推荐