响应式布局（响应式网页的构成&bootstrap框架）

最新推荐文章于 2024-06-28 21:22:19 发布

世间百态不过尔尔

最新推荐文章于 2024-06-28 21:22:19 发布

阅读量2.1k

点赞数 2

分类专栏： Bootstrap 文章标签：响应式布局（响应式网页的构成&amp;amp;bootstrap框架）

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88562367

版权

Bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、响应式布局
1、概念
响应式又叫自适应网页，可以根据网页窗口的调整而自动布局，不会导致页面效果的错乱，主要是针对移动端浏览器；通过响应式布局，可以使一套代码同时兼容多个尺寸的屏幕

2、响应式网页的构成
1）允许网页自动调整
使用viewport属性，让窗口可以自动伸缩
语法：<meta name="viewport" content = "width=device-width,initial-scale=1,user-scalable=no">
-viewport是由苹果提出的，称之为视口，指浏览器一般适应屏幕的大小
-width：视口宽度，一般取值为device-width，也可以为尺寸值
-height：高度，取值为尺寸值
-initial-scal：初始状态下缩放倍率
-user-scalable：是否允许用户自己缩放，默认为yes

2）不使用绝对宽度
所有元素的尺寸均使用百分比

3）字体大小使用em
4）流式布局
布局用的各个区块的位置军事浮动的，不是固定不变的
5）媒体查询
根据不同尺寸加载不同的样式
格式：
@media screen and (max-width:1080px){
    样式规则
}

6）图片使用自适应
图片不固定大小而设置百分比

bootstrap
是一个框架，响应式框架
优点：移动设备优先，所包含的样式，以移动设备优先考虑；响应式设计；开源；容易上手；包含强大的内置组件，易于实现各种效果

1、使用bootstrap
    1）添加viewport
    2）引入bootstrap的css文件
    3）引入jq的js文件
    4）移入bootstrap的js文件
2、全局css样式
    1）html5文档类型
    在bootstrap中使用了许多html5的新元素和css的新属性
    2）移动设备优先
    需要设置viewport
    3）全局样式
    使用html{font-family}来统一所有网页的默认字体
    使用body{margin:0}移除所有网页的外边距
    基本上为所有的元素都重新设置了基础样式

    4）布局容器
    通过.container类定义一个固定宽的并且支持响应时的布局容器

    .container-fluid:用于充满氟元素的布局容器
3、按钮
    在bootstrap中=定义了许多预定好的按钮样式，这些样式可以在a/button/input元素上使用

4、图片
    1）图片形状
    -img-rounded 带圆角的图片
    -img-circle 圆形图片
    -img-thumbnail 带灰色边框和内边距的图片
    2）响应式图片
    通过.img-responsive将图片设置响应式，使图片能够很好的充满父元素

5、表格
    1）表格样式
    .table 上边边框
    .table-striped 在tbody内天井斑马线形式条纹
    .table-bordered 为所有单元格添加边框
    .table-hover  为表格添加悬停效果

    2）tr、th、td
    .active  将悬停的颜色应用到行或单元格上
    .success 成功
    .warning 警告
    .danger  危险

    3）响应式表格
    通过把table放在任意.table-responsive元素内，可以实现表格的响应式

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale = 1">       
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery-3.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style>
        .img-rounded,.img-circle,.img-thumbnail{
            width: 200px;
            height: 200px;
        }
        .d1{
            width: 200px;

        }
    </style>
</head>
<body>
    <a href="">qwedwqs</a>
    <div class="container">
        <h1>123123</h1>
    </div>
    <div class="container-fluid">1</div>
    <!-- 按钮 -->
    <input type="button" class="btn" value="基本按钮">
    <input type="button" class="btn-default" value="默认样式">
    <input type="button" class="btn-success btn" value="成功">
    <input type="button" class="btn-info btn" value="弹出信息提示">
    <input type="button" class="btn-warning btn" value="警告按钮">
    <input type="button" class="btn-danger btn" value="危险操作">
    <input type="button" class="btn btn-lg" value="大按钮">
    <input type="button" class="btn-sm btn" value="小按钮">
    <input type="button" class="btn btn-xs" value="超级小按钮">
    <input type="button" class="btn btn-block" value="块级按钮">
    <!-- 图片 -->
    <img src="10.jpeg" alt="" class="img-rounded">
    <img src="11.jpeg" alt="" class="img-circle">
    <img src="12.jpeg" alt="" class="img-thumbnail">

    <div class="d1">
        <img src="13.jpeg" alt="" class="img-responsive">
    </div>

    <!-- 表格 -->
    <table class="table table-striped table-bordered table-hover">
        <tr class="active">
            <td class="success">1</td>
            <td>1</td>
        </tr>
        <tr>
            <td class="warning">1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>3</td>
            <td class="danger">3</td>
        </tr>
    </table>
    <!-- 响应式表格 -->
    <div class="table-responsive">
        <table class="table">
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </table>
    </div>
</body>
</html>