Bootstrap使用-bootstrap框架怎么用

    Python编程 wuya 111次浏览 已收录 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

    学海无涯 , 版权所有丨如未注明 , 均为原创丨转载请注明Bootstrap使用-bootstrap框架怎么用
    喜欢 (0)
    发表我的评论
    取消评论
    表情 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址