响应式设计Bootstrap任务二

最新推荐文章于 2022-12-23 16:21:12 发布

Mr_jianghanlin

最新推荐文章于 2022-12-23 16:21:12 发布

阅读量394

点赞数

分类专栏：前端文章标签： html html5 bootstrap

本文链接：https://blog.csdn.net/Mr_jianghanlin/article/details/105991794

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

响应式设计Bootstrap任务二应用框架做网页快速，并且十分的方便，节约时间。

首先看看最终的效果效果：

在这里插入图片描述

里面的布局全部都是由bootstrap提供，咱们直接应用，这样节省了许多时间，对自己不满意样式可以进行更改直接进行覆盖，修改部分样式。我们来看看引入bootstrap框架。

使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

要做这个项目：

 1. 设置背景颜色
 2. 使用布局容器带有.container类的<div>标签进行布局，在该<div>中添加一个<div class=“reservation”>，为该<div>标签设置宽度(width)和较大的padding值来实现表单白色透明背景(rgba(255,255,250,0.8))。
 3. 白色背景div.reservation中添加Bootstrap水平表单(通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。)，并且删掉表单中没有用到的<label>等标签。
 4. 通过.btn类来修改Bootstrap按钮的默认样式。
 5. 使用媒体查询，在屏幕小于768px时，让表单外层的<div>在小屏幕时拥有足够的宽度来显示完整的表单，并且设置body、button、 input、 select元素的字体为微软雅黑。

下面来看看具体的实现代码部分：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            background: url(one.jpeg);
            background-size: 100%;
            background-repeat: no-repeat;

        }


        .one1 {
            display: flex;
            justify-content: center;

        }

        .one {

            margin-top: 20%;
            width: 400px;
            padding: 50px;
            background-color: rgba(233, 233, 219, 0.7)
        }

        .two {
            background-color: #ffffff;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class=>
        <div class="container one1">
            <div class="reservation one">
                <form class="form-horizontal">
                    <div class="form-group">

                        <div class="col-sm-10 ">
                            <input type="email" class="form-control two" id="inputEmail3" placeholder="请输入餐厅名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10 ">
                            <input type="password" class="form-control two" id="inputPassword3" placeholder="请选择城市">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset- col-sm-10 col-xs-offset-3 col-xs-offset-5">
                            <button type="submit" class="btn btn-danger col-sm-5 col-xs-8"> <span
                                    class="glyphicon glyphicon-search" aria-hidden="true"> </span> 搜索</button>
                        </div>
                    </div>
                </form>


            </div>

        </div>

    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>

</html>

Mr_jianghanlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式设计Bootstrap任务二

响应式设计Bootstrap任务二应用框架做网页快速，并且十分的方便，节约时间。首先看看最终的效果效果：里面的布局全部都是由bootstrap提供，咱们直接应用，这样节省了许多时间，对自己不满意样式可以进行更改直接进行覆盖，修改部分样式。我们来看看引入bootstrap框架。使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）<!-- 最新...
复制链接

扫一扫