【响应式Web前端设计】一文学会使用Bootstrap!

请先学习该文

1 概念

在这里插入图片描述
在这里插入图片描述

媒体查询

媒体(media)查询在 CSS3 上有介绍:CSS3 @media 查询。

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

实例
如果浏览器窗口小于 500px, 背景将变为浅蓝色:

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

2 Bootstrap简介

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3 布局容器

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>布局容器</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<br>
<!--居中显示,两边有留白-->
<div class="container" style="border:1px solid #000000; height:100px;">.container</div>
<!--整个宽度-->
<div class="container-fluid" style="border:1px solid #000000; height:100px;">.container-fluid</div>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述

4 导航栏(navbar)

在这里插入图片描述
在这里插入图片描述

4.1 基本

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap基础导航栏</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <!--这里可以定义品牌图标-->
    <div class="navbar-header">
        <a class="navbar-brand " id="nav-brand-itheima" href="#" >
            网站首页
        </a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">系列教程</a></li>
        <li><a href="##">名师介绍</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</nav>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述

4.2 响应式

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap响应式导航栏</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--自定义背景色-->
    <!--<style>-->
        <!--.navbar-default {-->
            <!--background-color: #ff6e9b;-->
        <!--}-->
    <!--</style>-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
            <span class="sr-only">汉堡按钮</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    <!--这里可以定义品牌图标-->
        <div class="navbar-header">
            <a class="navbar-brand " id="nav-brand-itheima" href="#" >
                网站首页
            </a>
        </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
</div>
</nav>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>餐饮网站header部分</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        /*设置body元素字体为Microsoft YaHei*/
        body { font-family: Microsoft YaHei}
        .head-top{
            background: #5fa022;
            padding: 0.8em 0;
        }
        .navbar-brand{
            padding: 0 0;
        }
        /*设置图片logo的大小和位置*/
        .navbar-brand>img{
            height: auto;
            margin-right: 5px;
            margin-top: 5px;
            width: 250px;
        }
        /*设置整个导航菜单的内边距、背景色和阴影*/
        .navbar-default{
            padding: 1.5em 0;
            background-color: #f2f0f1;
            box-shadow: 12px -5px 39px -12px;
        }
        /*设置导航栏中菜单a链接的样式*/
        .navbar-default .navbar-nav>li a {
            top: 10px;
            padding: 0.5em 3em;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.2em;
            color:#919191;
        }
        /*设置导航栏菜单的鼠标悬停和获取焦点时的状态*/
        .navbar-default .navbar-nav> li >a:hover,
        .navbar-default .navbar-nav> li >a:focus {
            background:#D96B66;
            color: white;
            border-radius: 3px;
            -webkit-border-radius: 3px;
        }
        /*设置导航栏右侧a链接(0.00)的颜色*/
        .navbar-right>a{
            color:#D96B66;
        }
        /*媒体查询:当视口小于970px时,导航菜单字体变小,避免了换行的问题*/
        @media (max-width: 970px) {
            .navbar-default .navbar-nav>li a {
                font-size: 1.1em;
            }
        }
        /*header部分结束*/
    </style>
</head>
<body>
<!-- header -->
<header>
    <div class="head-top"></div>
    <nav class="navbar navbar-default" >
        <div class="container-fluid">
            <div class="container">
                <div class="navbar-header">
                    <!--<div class="logo">-->
                    <a href="#" class="navbar-brand" ><img src="images/logo.png"  alt=""></a>
                    <!--</div>-->
                    <!-- 当进入最小设备时,导航条将隐藏,显示“汉堡按钮”,点击时可以切面显示导航条隐藏的信息
                          * data-target :用于确定需要显示div
                      -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                        <span class="sr-only">汉堡按钮</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!-- 导航链接、表单和其他内容切换 -->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#" >主页</a></li>
                        <li><a href="#">餐厅</a></li>
                        <li><a href="#">健康</a></li>
                        <li><a href="#">话题</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                    <div class="navbar-right ">
                        <a href="#">
                            <h3> <span >¥0.00 <img src="images/bag.png" alt=""/></span></h3>
                        </a>
                    </div>
                </div>
            </div>
         </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</header>
<!-- header -->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

5 垂直表单-基本表单

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap基本表单</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form role="form">
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name"
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
        <p class="help-block">这里是块级帮助文本的实例。</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox">记住我
        </label>
    </div>	
    <button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>

6 栅格系统

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>栅格系统</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    div{
        border: 1.5px solid #000000;
    }
</style>
<br>
<div class="container">
    <div class="row">
        <div class="col-md-3 col-xs-6">1</div>
        <div class="col-md-3 col-xs-6">2</div>
        <div class="col-md-3 col-xs-6">3</div>
        <div class="col-md-3 col-xs-6">4</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-xs-6">5</div>
        <div class="col-md-3 col-xs-6">6</div>
        <div class="col-md-3 col-xs-6">7</div>
        <div class="col-md-3 col-xs-6">8</div>
    </div>
</div>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

7 标签页

说到点子上了 标签式导航是一个页面内的导航。导航条是整站的导航。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>胶囊标签页</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<br>
            <ul class="nav nav-pills">
                <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="pill">Home</a></li>
                <li role="presentation"><a href="#profile" role="tab" data-toggle="pill">Profile</a></li>
                <li role="presentation"><a href="#messages" role="tab" data-toggle="pill">Messages</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane  active" id="home">我是第一页</div>
                <div class="tab-pane " id="profile">我是第二页</div>
                <div class="tab-pane " id="messages">我是第三页</div>
            </div>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述

8 响应式工具

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>响应式工具</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        div{
            border: 1px solid black;
            font-weight: 800;
        }
    </style>
</head>
<body>
<br>
<div class="container" style="padding: 40px;">
    <div class="row visible-on">
        <div class="col-xs-6 col-sm-3" >
            <span class="hidden-xs">特别小型设备隐藏</span>
            <span class="visible-xs">✔ 在特别小型设备上可见</span>
        </div>
        <div class="col-xs-6 col-sm-3" >
            <span class="hidden-sm">小型设备隐藏</span>
            <span class="visible-sm">✔ 在小型设备上可见</span>
        </div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3" >
            <span class="hidden-md">中型设备隐藏</span>
            <span class="visible-md">✔ 在中型设备上可见</span>
        </div>
        <div class="col-xs-6 col-sm-3" >
            <span class="hidden-lg">大型设备隐藏</span>
            <span class="visible-lg">✔ 在大型设备上可见</span>
        </div>
    </div>
</div>
</body>
</html>

李响Superb CSDN认证博客专家 机器学习 TensorFlow 图像处理
成为一名优秀的算法工程师⬆️ ,
目前还在读软件工程,
AI攻防、算法和深度学习方向,
微博同名❤️ :李响Superb,
(记得关注,有问题微博私信!)
我们一起努力呀!
已标记关键词 清除标记
相关推荐
适读人群 :所有Web开发和设计人员。   随着移动设备的普及,用户上网的方发生了巨大变化,无论从样还是可用性来讲,只适合桌面显示器的网站已经过时了。如今,在设计网站的时候必须同时考虑多种屏幕尺寸和用户体验。如果网站对你或你的客户非常重要,那么实现响应设计就是当务之急。   “响应和移动优先”的设计理念,可以确保无论使用什么设备都可以正常访问你的网站。在这一理念的指导下,本书围绕实战案例,全面讲解了与响应设计相关的现代Web技术,堪称一部“响应设计大全”。   这一版根据新的Web设计趋势进行了更新,展示了实现现代响应设计有效的方,涵盖了创建响应设计所必需的全部新技术和工具。掌握了这些内容,你设计的网站不仅可以适应当下,更可以顺应未来。   - 理解响应设计,以及为何它对现代Web设计如此重要   - 清晰、高效地编写富有语义的HTML5标记   - 使用CSS3媒体查询基于设备应用不同的样,了解媒体查询的新进展   - 根据不同的屏幕大小、分辨率和使用环境加载不同的图片   - 掌握表单处理,使用HTML5标记添加日期选择器、范围滑块等交互控件   - 在响应设计使用SVG提供分辨率无关的图片,修改SVG并添加动画效果   - 使用CSS新的特性,如自定义字体、nth-child选择符、自定义属性及CSS calc
随着移动设备的普及,用户上网的方发生了巨大变化,无论从样还是可用性来讲,只适合桌面显示器的网站已经过时了。如今,在设计网站的时候必须同时考虑多种屏幕尺寸和用户体验。如果网站对你或你的客户品牌非常重要,那么实现响应设计就是当务之急。 “响应和移动优先”的设计理念,可以确保无论使用什么设备都可以正常访问你的网站。在这一理念的指导下,本书围绕实战案例,全面讲解了与响应设计相关的现代Web技术,堪称一部“响应设计大全”。 这一版根据最新的Web设计趋势进行了更新,展示了实现现代响应设计最有效的方,涵盖了创建优秀的响应设计所必需的全部最新技术和工具。掌握了这些内容,你设计的网站不仅可以适应当下,更可以顺应未来。 - 理解响应设计,以及为何它对现代Web设计如此重要 - 清晰、高效地编写富有语义的HTML5标记 - 使用CSS3媒体查询基于设备应用不同的样,了解媒体查询的最新进展 - 根据不同的屏幕大小、分辨率和使用环境加载不同的图片 - 掌握表单处理,使用HTML5标记添加日期选择器、范围滑块等交互控件 - 在响应设计使用SVG提供分辨率无关的图片,修改SVG并添加动画效果 - 使用CSS最新的特性,如自定义字体、nth-child选择符、自定义属性及CSS calc
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值