小菜鸟进阶史
小菜鸟进阶史

JavaScript>响应式布局与CSS样式和JS插件(轮播图)的使用方法

响应式布局：
同一套页面可以兼容不同分辨率的设备。

实现：依赖于栅格系统：将一行平均分为12个格子，可以指定元素占几个格子，

步骤：

    1.定义容器。相当于之前的table

        容器分类：

            1.container：两边有留白

            2.container-fluid：每一种设备都是100%宽度

    2.定义行，相当于之前的tr   样式：row

    3.定义元素，相当于之前的td，指定给元素在不同的设备上，所占的格子数目。    样式：col-设备代号-格子数目

        设备代号：

    xs：超小屏幕 手机 (<768px)：.col-xs-12

    sm：小屏幕 平板 (≥768px)

    md：中等屏幕 桌面显示器 (≥992px)

    lg：大屏幕 大桌面显示器 (≥1200px)

    注意事项：

        1.一行中如果格子数目超过12，则超出部分自动换行

        2.栅格类属性可以向上兼容。栅格类适用于屏幕宽度大于或等于分界点大小的设备

        3.如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行

 

CSS样式和JS插件

全局css样式：官网链接：https://v3.bootcss.com/css/

    按钮：class="btn btn-default"

    图片：

        class="img-responsive"：图片在任意尺寸都占100%

        图片形状：

            ...：方形

            ...：圆形

            ...：相框

    表格：

        table：为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

        table-striped ：可以给 之内的每一行增加斑马条纹样式

        table-hover：可以让 中的每一行对鼠标悬停状态作出响应

    表单：

        给表单项添加：class="form-control"：、