Bootstrap使用-bootstrap框架怎么用

ernestwang 1018 0

Bootstrap使用

像素与分辨率

  • 像素:图片中不可分割的最小单元或元素
  • 分辨率:就是多少像素每英寸,通常称为dpi

屏幕尺寸(宽度)

  • 超小屏幕:宽度 < 768,如:手机
  • 小型屏幕:768 <= 宽度 < 992,如:平板
  • 中等屏幕:992 <= 宽度 < 1200,如:电脑
  • 超大屏幕:宽度 >= 1200,如:电视

响应式布局

  • 说明:根据客户端的不同显示不同的效果,称为响应式布局。
  • 原因:现在很多的应用移动设备的访问已经称为了主流,设计时应该移动设备优先。

解决方案

  • 根据客户端不同,跳转到不同的网站
    • 适合于较大的无法兼容的网站,如:京东、淘宝
  • 使用媒体查询
    • 适合于可以兼容的不太复杂的网站,如:苹果官网

媒体查询

  • 相关语法
    语法 说明
    @media 媒体查询标志
    [only] screen [只]支持屏幕
    and 并且
    min-width 最小宽度
    max-width 最大宽度
    min-height 最小高估
    max-height 最大高度
  • 使用方式
    <head>
        <style type="text/css">
        /* 方式1:使用@media指定样式 */
        /*
        @media only screen and (max-width: 768px) {
            div {
                height: 200px;
                background-color: red;
            }           
        }
        */
        /* 方式2:使用@import导入外部的CSS文件 */
        @import url("01-chaoxiao.css") only screen and (max-width: 768px);
    
        @media only screen and (min-width: 768px) and (max-width: 992px) {
            div {
                height: 200px;
                background-color: green;
            }           
        }
    
        @media only screen and (min-width: 992px) and (max-width: 1200px) {
            div {
                height: 200px;
                background-color: blue;
            }           
        }
        /*
        @media only screen and (min-width: 1200px) {
            div {
                height: 200px;
                background-color: orange;
            }           
        }
        */
        </style>
        <!-- 方式3:使用link标签加载外部CSS文件,需要设置media属性 -->
        <link rel="stylesheet" type="text/css" href="01-chaoda.css" media="only screen and (min-width: 1200px)" />
    </head>

viewport(了解)

  • 说明:viewport 是用户网页的可视区域。是一个比实际屏幕尺寸大的虚拟窗口,称为视区或视口
  • 示例:<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 属性:
    • width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
    • height:和 width 相对应,指定高度。
    • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
    • maximum-scale:允许用户缩放到的最大比例。
    • minimum-scale:允许用户缩放到的最小比例。
    • user-scalable:用户是否可以手动缩放。

bootstrap简介

  • 说明:
    • 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
    • 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
  • 官网:https://www.bootcss.com
  • 下载:用于生产环境的版本(3.3.7)
  • 使用:
    • 将下载好的bootstrap拷贝到项目目录(也可以是cdn资源)
    • 复制粘贴基础模板
    • 修改依赖文件路径

bootstrap语法

  • 布局容器
    • container:类用于固定宽度并支持响应式布局的容器
    • container-fluid:类用于 100% 宽度,占据全部视口(viewport)的容器
  • 栅格系统
    • 行:row,内容宽度会被平均分为12等份,设置宽度只需要指定份数即可
    • 列:col-xs-份数col-sm-份数col-md-份数col-lg-份数
    • 列偏移:col-xs-offset-份数col-sm-offset-份数col-md-offset-份数col-lg-offset-份数
    • 列排序:col-屏幕-pull-份数col-屏幕-push-份数
    • 嵌套列:栅格系统可以进行嵌套使用

全局CSS样式

  • 排版
  • 代码
  • 表格
  • 表单
  • 按钮
  • 辅助类

组件

  • 字体图标
  • 下来菜单
  • 按钮组
  • 按钮式下来菜单
  • 输入框组
  • 导航
  • 导航条
  • 路径导航
  • 分页
  • 标签
  • 徽章
  • 巨幕
  • 页头
  • 缩略图
  • 警告框
  • 进度条
  • 媒体对象
  • 列表组
  • 面板

JS插件

  • 模态框
  • 下拉菜单
  • 滚动监听
  • 标签页
  • 工具提示
  • 弹出框
  • 警告框
  • 按钮

可视化布局工具

  • LayoutIt

标签: 框架

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~

复制成功
微信号: irenyuwang
关注微信公众号,站长免费提供流量增长方案。
我知道了