bootstrap学习

特别提示：以下代码参考此网页构建：https://www.firecode.io/
css 及 js 请替换成你自己的文件地址
1.外层套container-fluid类名
2.container
3.row
4.col-sm-数字最大为12 如：col-sm-6
5.font-size 我设置的是绝对单位的16px
针对图片的处理（来自“阿发”的帮助）
图片描述
针对流式布局在元素底部添加padding样式
图片描述
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap学习</title>
        
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <!-- 优先使用 IE 最新版本和 Chrome -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <!-- 页面描述 -->
        <meta name="description" content="优顾留学" />
        <!-- 页面关键词 -->
        <meta name="keywords" content="优顾留学 ,优顾,顾问" />
        <!-- 定义网页作者 -->
        <meta name="author" content="巨大奇迹" />
        <!-- 搜索引擎抓取 -->
        <meta name="robots" content="index,follow" />
        
        <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css"/>
        
        <script src="coJS/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        
        <style>
            body {
                font-size: 16px;
            }
            body,
            ul {
                padding: 0;
                margin: 0;
            }
            .container-fluid {
                padding-left: 0;
                padding-right: 0;
            }
            .contentOne {
                background: #007BB6;
            }
            .navPar {
                padding-top: 10px;
                line-height: 40px;
            }
            .navUl {
                font-weight: bold;
                font-size: 18px;
            }
            .navUl li span:before {
                margin-right: 10px;
            }
            .navUl {
                overflow: hidden;
            }
            .navUl li {
                display: inline-block;
                list-style-type: none;
                cursor: pointer;
            }
            .navUl span {
                display: block;
                padding: 10px;
                margin-right: 20px;
            }
            .contentOne-1 {
                padding-top: 10px;
            }
            .contentOne-1,
            .contentOne-2 {
                color: #fff;
            }
            .contentOne-2 {
                padding-top: 60px;
            }
            .contentOne-2 h2 {
                margin: 10px 0;
                font-size: 48px;
                line-height: 60px;
            }
            
            .contentOne-2 .p1 {
                margin-bottom: 30px;
                font-size: 16px;
                line-height: 25px;    
            }
            
            .form-box {
                padding-bottom: 80px;
            }
            .form-top {
                padding: 15px 20px;
                font-size: 20px;
                background: rgba(0,0,0,0.2);
                
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
            }
            .form-top h3 {
                text-align: left;
                line-height: 40px;
            }
            .form-content {
                padding: 40px 20px;
                background: rgba(0,0,0,0.4);
                
                border-bottom-left-radius: 15px;
                border-bottom-right-radius: 15px;
            }
            .submit {
                margin-top: 20px;
                margin-bottom: 20px;            
            }
            .signType .btn {
                width: 100%;
                margin: 10px 0;
                padding: 15px;
                border-radius: 10px;            
            }
            @media(min-width: 960px){
                .pic {
                    width: 500px;
                }
            }
            @media(max-width: 960px){
                .pic {
                    width: 100%;
                }
            }
        </style>
    </head>
    
    <body>
        <div class="container-fluid">
            <div class="contentOne">    
                <header class="container contentOne-1">
                    <div class="row navPar">
                        <div class="col-sm-6">
                            <a href="/">
                                <img src="img/UrgooTb@2x.png" alt="" />
                            </a>
                        </div>
                        <ul class="col-sm-6 navUl ">
                            <li>
                                <span class="glyphicon glyphicon-home">Home</span>
                            </li>
                            <li>
                                <span class="glyphicon glyphicon-question-sign">FQA</span>
                            </li>
                        </ul>
                    </div>
                </header>
                
                <div class="container contentOne-2"> 
                    <div class="row">
                        <div class="col-sm-7" style="padding-bottom: 80px;">
                            <h2>
                                A <strong>learning-first</strong>
                                approach to getting a <strong>six-figure</strong>
                                technology job
                            </h2>
                            <p class="p1">
                                Firecode.io uses learning algorithms and curated coding interview questions to help you land your next dream tech job.
                            </p>
                            <img class="pic" src="https://www.firecode.io/assets/new-macbook-landing.png" 
                                style="height: auto;"/>
                        </div>
                        <div class="col-sm-5 form-box">
                            <div class="form-top">
                                <h3>Sign up and start learning in minutes - for free</h3>
                            </div>
                            <div class="form-content">
                                <div class="form-group-lg">
                                    <input type="text" class="form-control" placeholder="Sgin in">
                                  </div>
                                  <button type="button" class="btn btn-primary btn-lg btn-block submit">
                                      Large button
                                  </button>
                                  
                                  <div class="row signType">
                                      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                                          <button class="btn" style="background: #3A5898;">Sign up with Facebook</button>
                                      </div>
                                      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                                          <button class="btn" style="background: #C64333;">Sign up with Facebook</button>
                                      </div>
                                      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                                          <button class="btn" style="background: #007AB5;">Sign up with Facebook</button>
                                      </div>
                                      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                                          <button class="btn" style="background: #44658E;">Sign up with Facebook</button>
                                      </div>
                                  </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </body>
</html>
bootstrap学习

巨大奇迹

引用和评论

koa2

SAP UI5 应用开发教程之六十一 - 在 SAP UI5 应用里绘制甘特图 Gantt Chart 试读版

如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面

Ant Design（Antd）中的表单处理：如何高效使用Form组件进行数据收集与验证

深入理解 Bootstrap：响应式布局的实现

个人练习前端技术使用Bootstrap、JQuery、thymeleaf
