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

实现:依赖于栅格系统:将一行平均分为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样式:官网链接:IT虾米网

    按钮:class="btn btn-default"

    图片:

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

        图片形状:

            <img src="..." alt="..." class="img-rounded">:方形

            <img src="..." alt="..." class="img-circle">:圆形

            <img src="..." alt="..." class="img-thumbnail">:相框

    表格:

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

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

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

    表单:

        给表单项添加:class="form-control":<input><textarea><select> 元素都将被默认设置宽度属性为 width: 100%

组件:

    导航条(官网代码):IT虾米网

    分页条(官网代码):IT虾米网

插件:

    轮播图(官网代码):IT虾米网


发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

MySQL数据库>软件安装、卸载、配置(启动、登录、退出、目录结构)讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。