bootstrap-meta,@madie

本文介绍如何通过<meta>标签设置视口属性实现不同设备上的适配,并使用CSS媒体查询来调整不同屏幕尺寸下的页面样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  • width - viewport的宽度
  • height - viewport的高度
  • initial-scale - 初始的缩放比例
  • minimum-scale - 允许用户缩放到的最小比例
  • maximum-scale - 允许用户缩放到的最大比例
  • user-scalable - 用户是否可以手动缩放

<link rel="icon" href="/favicon.ico" type="image/x-icon">

@media screen and (max-width: 768px) {
            body{
                background-color: red;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px) {
            body{
                background-color: yellow;
            }
        }
        @media screen and (min-width: 992px) and (max-width: 1200px) {
            body{
                background-color: blue;
            }
        }
        @media screen and (min-width: 1200px) {
            body{
                background-color: aqua;
            }
        }

不同屏幕大小下显示不同的背景,大体就是这四种屏幕

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
这个是菜鸟教程里面的,专门为bootstrap准备的。


看那两红色的框就行了,他们两的关系就是差那么个padding-left/right


附加

    <!--网页作者-->
    
<meta name="author" content="路迈网,technique centerHJ">
    <!-- 版权-->
    
<meta name="copyright" content="路迈网">
    <!-- 关键字使用","分隔 -->
    
<meta name="keywords" content="再制造,再制造产品,再制造产业,再制造零配件,再制造卡钳,再制造起动机,再制造发动机,再制造发电机,再制造变速器,再制造助力泵,路迈网">


    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

   现在倒是有不少网站都开始有这个了可也去这里看看,解释的比较详细,下面是源码



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--网页作者-->
    <meta name="author" content="路迈网,technique center,HJ">
    <!-- 版权-->
    <meta name="copyright" content="路迈网">
    <meta name="hj" content="huangjun">
    <!-- 关键字使用","分隔 -->
    <meta name="keywords" content="再制造,再制造产品,再制造产业,再制造零配件,再制造卡钳,再制造起动机,再制造发动机,再制造发电机,再制造变速器,再制造助力泵,路迈网">
    <title>再制造|再制造产品|再制造产业|再制造零配件|再制造发动机|路迈网-路迈网-中国专业再制造产品电商平台</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        @media screen and (max-width: 768px) {
            body{
                background-color: red;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px) {
            body{
                background-color: yellow;
            }
        }
        @media screen and (min-width: 992px) and (max-width: 1200px) {
            body{
                background-color: blue;
            }
        }
        @media screen and (min-width: 1200px) {
            body{
                background-color: aqua;
            }
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="row text-center">
            <div class="col-md-4 col-sm-6 col-xs-12">col-md-4 col-sm-6 col-xs-12</div>
            <div class="col-md-4 col-sm-6 col-xs-12">col-md-4 col-sm-6 col-xs-12</div>
            <div class="col-md-4 col-sm-6 col-xs-12">col-md-4 col-sm-6 col-xs-12</div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>

里面的文件自己去引用jQuery版本1.10以上



<think>我们使用Bootstrap Icons有两种方式:CDN引入和本地引入。如果选择本地引入,需要先下载图标字体文件,然后正确设置路径。 ### 步骤1:下载Bootstrap Icons 1. **访问官方下载页面**: - 前往 [Bootstrap Icons 官网](https://icons.getbootstrap.com/) - 点击 "Download" 按钮下载最新版本(当前为1.11.3) 2. **下载方式**: - 直接下载ZIP文件:https://github.com/twbs/icons/releases/download/v1.11.3/bootstrap-icons-1.11.3.zip - 或者使用npm(如果项目使用npm管理): ```bash npm install bootstrap-icons ``` ### 步骤2:解压并放置到项目中 解压下载的ZIP文件,你会得到以下目录结构: ``` bootstrap-icons-1.11.3/ ├── font/ │ ├── bootstrap-icons.css │ ├── bootstrap-icons.json │ ├── bootstrap-icons.woff │ ├── bootstrap-icons.woff2 │ └── fonts/ │ ├── bootstrap-icons.woff │ └── bootstrap-icons.woff2 └── svg/ ``` 将 `font` 文件夹复制到你的项目静态资源目录中,例如: ``` your-project/ ├── css/ ├── js/ └── fonts/ <-- 将下载的font文件夹内容放这里 ├── bootstrap-icons.woff └── bootstrap-icons.woff2 ``` ### 步骤3:在HTML中引入本地文件 修改`link`标签的`href`属性,指向本地的`bootstrap-icons.css`文件: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>本地引入Bootstrap Icons</title> <!-- 本地引入Bootstrap Icons --> <link rel="stylesheet" href="path/to/bootstrap-icons.css"> <!-- 示例使用 --> <style> .icon-example { font-size: 2rem; color: blue; } </style> </head> <body> <i class="bi bi-plus-lg icon-example"></i> <i class="bi bi-heart-fill icon-example" style="color: red;"></i> </body> </html> ``` ### 路径说明 假设你的项目结构如下: ``` project-root/ ├── index.html └── assets/ ├── css/ ├── js/ └── fonts/ ├── bootstrap-icons.css ├── bootstrap-icons.woff └── bootstrap-icons.woff2 ``` 则引入路径应为: ```html <link rel="stylesheet" href="assets/fonts/bootstrap-icons.css"> ``` ### 验证引入是否成功 1. 检查浏览器开发者工具(Network选项卡): - 确认`bootstrap-icons.css`文件加载成功(状态200) - 确认字体文件(.woff/.woff2)加载成功 2. 页面中应正常显示图标,例如: - 加号图标:`<i class="bi bi-plus-lg"></i>` - 心形图标:`<i class="bi bi-heart-fill"></i>` ### 注意事项 1. **字体文件路径**: - 在`bootstrap-icons.css`文件中,默认的字体路径是`../fonts/`,例如: ```css @font-face { font-family: "bootstrap-icons"; src: url("../fonts/bootstrap-icons.woff2") format("woff2"), url("../fonts/bootstrap-icons.woff") format("woff"); } ``` - 如果你的项目结构不同,需要调整CSS文件中的路径或修改CSS文件内容。 2. **自定义路径**: 如果字体文件不在CSS文件的上一级目录的`fonts`文件夹中,你可以修改CSS文件中的路径。例如,如果字体文件与CSS文件在同一目录,则修改为: ```css @font-face { font-family: "bootstrap-icons"; src: url("bootstrap-icons.woff2") format("woff2"), url("bootstrap-icons.woff") format("woff"); } ``` 3. **版本更新**: 当需要更新版本时,重复下载步骤并替换文件即可。 §§相关问题§§: 1. 如何自定义Bootstrap Icons的颜色和大小? 2. 在Vue/React项目中如何按需引入Bootstrap Icons? 3. 除了字体图标,Bootstrap Icons还有哪些使用方式? 4. 如何解决字体图标加载失败时的备用显示问题?</think>### 本地引入 Bootstrap Icons 的完整指南 #### 如何下载 Bootstrap Icons 1. **官方下载方式**: - 访问 [Bootstrap Icons 官网](https://icons.getbootstrap.com/) - 点击页面上的 "Download" 按钮 - 当前最新版本为 1.11.3,下载链接: [https://github.com/twbs/icons/releases/download/v1.11.3/bootstrap-icons-1.11.3.zip](https://github.com/twbs/icons/releases/download/v1.11.3/bootstrap-icons-1.11.3.zip) 2. **替代下载方式**: ```bash # 使用 npm npm install bootstrap-icons # 使用 yarn yarn add bootstrap-icons # 使用 CDN 直接下载 wget https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css wget https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2 wget https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff ``` #### 项目目录结构建议 ```plaintext your-project/ ├── index.html ├── css/ │ ├── main.css ├── js/ │ └── main.js └── assets/ └── icons/ ├── bootstrap-icons.css # 图标样式文件 └── fonts/ ├── bootstrap-icons.woff2 # 字体文件 └── bootstrap-icons.woff # 字体文件 ``` #### HTML 中使用本地引入 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>本地引入 Bootstrap Icons</title> <!-- 本地引入 Bootstrap Icons --> <link rel="stylesheet" href="assets/icons/bootstrap-icons.css"> <style> .icon-large { font-size: 2rem; color: #0d6efd; } </style> </head> <body> <div class="container"> <h1>本地图标示例</h1> <!-- 基本图标 --> <i class="bi bi-plus-lg"></i> 添加项目 <!-- 带样式的图标 --> <div class="mt-3"> <i class="bi bi-plus-circle-fill icon-large"></i> <i class="bi bi-plus-square text-success" style="font-size: 1.5rem;"></i> </div> <!-- 按钮中的图标 --> <button class="btn btn-primary mt-3"> <i class="bi bi-plus-lg me-1"></i> 新建 </button> </div> </body> </html> ``` ### 关键路径说明 1. **CSS 文件路径**: ```html <link rel="stylesheet" href="assets/icons/bootstrap-icons.css"> ``` - 这是图标的核心样式文件 - 路径根据你的项目结构调整 2. **字体文件路径**: 在 `bootstrap-icons.css` 文件中,你会看到类似这样的代码: ```css @font-face { font-family: "bootstrap-icons"; src: url("./fonts/bootstrap-icons.woff2") format("woff2"), url("./fonts/bootstrap-icons.woff") format("woff"); } ``` - 确保字体文件路径正确 - 如果字体文件不在 `./fonts/` 目录下,需要修改这里的路径 ### 常见问题解决方案 1. **图标不显示**: - 检查浏览器控制台是否有 404 错误 - 确保字体文件路径正确 - 验证文件权限(特别是本地服务器环境) 2. **路径调整示例**: 如果你的目录结构是: ``` css/ └── icons.css fonts/ └── bootstrap-icons.woff2 ``` 需要修改 `bootstrap-icons.css` 中的路径: ```css @font-face { font-family: "bootstrap-icons"; src: url("../fonts/bootstrap-icons.woff2") format("woff2"), url("../fonts/bootstrap-icons.woff") format("woff"); } ``` 3. **性能优化建议**: - 使用 WOFF2 格式(现代浏览器支持) - 添加字体预加载: ```html <link rel="preload" href="assets/icons/fonts/bootstrap-icons.woff2" as="font" type="font/woff2" crossorigin> ``` ### 完整下载使用流程 1. 下载图标包(ZIP 文件) 2. 解压到项目目录(如 `assets/icons/`) 3. 复制以下文件到你的项目: - `bootstrap-icons.css` - `fonts/bootstrap-icons.woff2` - `fonts/bootstrap-icons.woff`(可选,兼容旧浏览器) 4. 在 HTML 中引用 CSS 文件 5. 使用图标类名:`<i class="bi bi-icon-name"></i>`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值