bootstrap5 表单如何创建——迹忆客-ag捕鱼王app官网

使用 bootstrap 创建表单

html 表单是网页和应用程序的一个组成部分，但是使用 css 手动一个一个地创建表单布局或样式化表单控件通常很麻烦和乏味。 bootstrap5 通过预定义的一组类，极大地简化了表单控件（如label、input、select、textarea、button等）的样式和对齐的过程。

bootstrap5 提供了三种不同类型的表单布局：

• 垂直表单（默认）
• 水平表单
• 内联表单

以下部分将一一介绍所有这些表单布局以及各种与表单相关的 bootstrap5 组件。

创建垂直表单布局

要创建垂直表单布局，只需使用预定义的边距实用程序类对标签、表单控件、可选表单文本和表单验证消息进行分组。

下面这个示例，其中表单控件垂直放置，标签位于顶部。

    

        email
        
    
    

        password
        
    
    

        

            
            记住我
        
    
    登录

上面示例的表单样式如下

我们将在下一章中了解自定义复选框和其他自定义表单控件。

注意 ：所有文本表单控件，例如 和 都需要类 <code>.form-control</code>，而 <select> 需要类 .form-select 用来设置一般的样式。 这些类还使表单控件的宽度为 100% 。 要更改它们的宽度或内联使用<a href="/w/bootstrap5/bootstrap5-grid-system" target="_blank">bootstrap5 的预定义网格类</a>。</p> </blockquote> <blockquote class="alert alert-warning"> <p><strong><code>提示</code></strong> ：建议使用设置 margin-bottom 的类（例如，mb-2、mb-3 等）在表单组之间添加垂直间距。 因为，在整个表单中使用单向边距可以防止边距塌陷并创建更多的组合形式。</p> </blockquote> <hr> <h2 id="创建水平表单布局">创建水平表单布局</h2> <p>我们还可以使用 bootstrap5 网格类创建水平表单布局，其中标签和表单控件并排对齐。 要创建水平表单布局，需要在表单组上添加 <code>.row</code> 类并使用 <code>.col-*-*</code> 网格类来指定标签和控件的宽度。</p> <p>此外，请确保在 <label> 元素上应用类 <code>.col-form-label</code>，从而保证它们与关联的表单控件垂直居中。 让我们看一个例子：</p> <blockquote class="alert alert-info"> <pre><code class="language-html"><form> <div class="row mb-3"> <label for="inputemail" class="col-sm-2 col-form-label">email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputemail" placeholder="email"> </div> </div> <div class="row mb-3"> <label for="inputpassword" class="col-sm-2 col-form-label">password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputpassword" placeholder="password"> </div> </div> <div class="row mb-3"> <div class="col-sm-10 offset-sm-2"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="checkremember"> <label class="form-check-label" for="checkremember">记住我</label> </div> </div> </div> <div class="row"> <div class="col-sm-10 offset-sm-2"> <button type="submit" class="btn btn-primary">登录</button> </div> </div> </form> </code></pre> <p><a href='https://tools.jiyik.com/try_code/bootstrap5_horizontal_form_layout' class='run-code' target='_blank'>尝试一下</a></p> </blockquote> <p>上面示例表单样式如下</p> <p><img src="/uploads/211118/i_20211118223001c929b8.jpg" alt="bootstrap5 水平表单布局示例"></p> <hr> <h2 id="创建内联表单布局">创建内联表单布局</h2> <p>有时我们可能希望在一行中显示一系列表单控件和按钮来压缩布局。 可以使用 <a href="/w/bootstrap5/bootstrap5-grid-system" target="_blank">bootstrap5 的网格类</a>轻松的完成此操作。</p> <blockquote class="alert alert-info"> <pre><code class="language-html"><form> <div class="row align-items-center g-3"> <div class="col-auto"> <label class="visually-hidden" for="inputemail">email</label> <input type="email" class="form-control" id="inputemail" placeholder="email"> </div> <div class="col-auto"> <label class="visually-hidden" for="inputpassword">password</label> <input type="password" class="form-control" id="inputpassword" placeholder="password"> </div> <div class="col-auto"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="checkremember"> <label class="form-check-label" for="checkremember">记住我</label> </div> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary">登录</button> </div> </div> </form> </code></pre> <p><a href='https://tools.jiyik.com/try_code/bootstrap5_inline_form_layout' class='run-code' target='_blank'>尝试一下</a></p> </blockquote> <p>上面示例表单样式如下</p> <p><img src="/uploads/211118/i_2021111822342906eca8.jpg" alt="bootstrap5 内联表单布局"></p> <hr> <h2 id="创建响应式表单布局">创建响应式表单布局</h2> <p>我们还可以通过使用具有特定断点的网格类来创建响应式的表单。</p> <p>下面的示例将在中型设备及以上设备上创建一个内联布局的表单（即视口宽度≥768px），但在较小的视口上垂直显示。</p> <blockquote class="alert alert-info"> <pre><code class="language-html"><form> <div class="row align-items-center g-3"> <div class="col-md-auto col-12"> <label class="form-label d-md-none" for="inputemail">email</label> <input type="email" class="form-control" id="inputemail" placeholder="email"> </div> <div class="col-md-auto col-12"> <label class="form-label d-md-none" for="inputpassword">password</label> <input type="password" class="form-control" id="inputpassword" placeholder="password"> </div> <div class="col-md-auto col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="checkremember"> <label class="form-check-label" for="checkremember">记住我</label> </div> </div> <div class="col-md-auto col-12"> <button type="submit" class="btn btn-primary">登录</button> </div> </div> </form> </code></pre> <p><a href='https://tools.jiyik.com/try_code/bootstrap5_responsive_form_layout' class='run-code' target='_blank'>尝试一下</a></p> </blockquote> <p>点击上面的尝试一下查看效果。</p> <hr> <h2 id="创建静态表单控件">创建静态表单控件</h2> <p>当我们只想在表单标签旁边显示纯文本值而不是表单控件时，可能会出现这种情况。 可以通过将 <code>.form-control</code> 类替换为 <code>.form-control-plaintext</code> 并在标签上使用 <code>readonly</code> 属性来实现此操作。</p> <p><code>.form-control-plaintext</code> 类从表单字段中删除默认样式，但保留正确的 margin 值和 padding 值。 我们来看一个例子：</p> <blockquote class="alert alert-info"> <pre><code class="language-html"><form> <div class="row mb-3"> <label for="inputemail" class="col-sm-2 col-form-label">email</label> <div class="col-sm-10"> <input type="email" readonly class="form-control-plaintext" id="inputemail" value="peterparker@jiyik.com"> </div> </div> <div class="row mb-3"> <label for="inputpassword" class="col-sm-2 col-form-label">password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputpassword" placeholder="password"> </div> </div> <div class="row mb-3"> <div class="col-sm-10 offset-sm-2"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="checkremember"> <label class="form-check-label" for="checkremember">记住我</label> </div> </div> </div> <div class="row"> <div class="col-sm-10 offset-sm-2"> <button type="submit" class="btn btn-primary">登录</button> </div> </div> </form> </code></pre> <p><a href='https://tools.jiyik.com/try_code/bootstrap5_static_form_control' class='run-code' target='_blank'>尝试一下</a></p> </blockquote> <p>上面示例输出如下</p> <p><img src="/uploads/211118/i_202111182246258792e2.jpg" alt="bootstrap5 静态表单"></p> <hr> <h2 id="表单控件的大小">表单控件的大小</h2> <p>我们还可以将 input、textarea 和 select 的大小与 bootstrap5 网格列大小相匹配。 只需将表单控件（即 <input>、<textarea> 和 <select>）放在网格列中。</p> <blockquote class="alert alert-info"> <pre><code class="language-html"><div class="row g-3"> <div class="col-6"> <input type="text" class="form-control" placeholder="city"> </div> <div class="col-4"> <select class="form-select"> <option>state</option> </select> </div> <div class="col-2"> <input type="text" class="form-control" placeholder="zip"> </div> </div> </code></pre> <p><a href='https://tools.jiyik.com/try_code/bootstrap5_grid_form_control' class='run-code' target='_blank'>尝试一下</a></p> </blockquote> <p>上面示例输出结果如下</p> <p><img src="/uploads/211118/i_20211118225502e6eb94.jpg" alt="bootstrap5 网格列中的表单"></p> <hr> <h2 id="向表单控件添加帮助文本">向表单控件添加帮助文本</h2> <p>为表单控件放置帮助文本，来引导用户在表单中输入正确的数据。 要实现此目的，可以使用 <code>.form-text</code> 类为表单控件放置帮助文本。 帮助文本通常显示在控件的底部。 看下面的例子：</p> <blockquote class="alert alert-info"> <pre><code class="language-html"><label class="form-label" for="inputpassword">password</label> <input type="password" class="form-control" id="inputpassword"> <div class="form-text"> must be 8-20 characters long, contain letters, numbers and special characters, but must not contain spaces. </div> </code></pre> <p><a href='https://tools.jiyik.com/try_code/bootstrap5_block_help_text' class='run-code' target='_blank'>尝试一下</a></p> </blockquote> <p>上面示例输出结果如下</p> <p><img src="/uploads/211118/i_202111182259555cae57.jpg" alt="bootstrap5 帮助文本"></p> <p>同样，我么也可以使用 <small> 元素放置内嵌的帮助文本。 在这种情况下不需要使用 <code>.form-text</code> 。 以下示例显示了如何实现这一点：</p> <blockquote class="alert alert-info"> <pre><code class="language-html"><div class="row align-items-center g-3"> <div class="col-auto"> <label class="col-form-label" for="inputpassword">password</label> </div> <div class="col-auto"> <input type="password" class="form-control" id="inputpassword"> </div> <div class="col-auto"> <span class="form-text">必须 8-20 个字符长.</span> </div> </div> </code></pre> <p><a href='https://tools.jiyik.com/try_code/bootstrap5_inline_help_text' class='run-code' target='_blank'>尝试一下</a></p> </blockquote> <p>内联帮助文本的样式如下所示</p> <p><img src="/uploads/211118/i_20211118230335a9966a.jpg" alt="bootstrap5 内联帮助文本表单"></p> <hr> <h2 id="创建禁用的表单控件">创建禁用的表单控件</h2> <p>要禁用单个表单控件，例如 <input>、<textarea>、<select>，只需向它们添加禁用的属性 <code>disabled</code>，bootstrap5 将完成剩下的工作。 下面是一个例子</p> <blockquote class="alert alert-info"> <pre><code class="language-html"><input type="text" class="form-control mb-3" placeholder="禁用的 input" disabled> <select class="form-select" disabled> <option>禁用的 select</option> </select> </code></pre> <p><a href='https://tools.jiyik.com/try_code/bootstrap5_disabled_form_control' class='run-code' target='_blank'>尝试一下</a></p> </blockquote> <p>上面的代码显示的表单的样式如下</p> <p><img src="/uploads/211118/i_202111182318381ab093.jpg" alt="bootstrap5 禁用的表单控件"></p> <hr> <h2 id="创建只读的表单控件">创建只读的表单控件</h2> <p>创建只读的表单控件和禁用的表单控件类似，只需要将标签上的 <code>disabled</code> 替换成 <code>readonly</code></p> <blockquote class="alert alert-info"> <pre><code class="language-html"><input type="text" class="form-control mb-3" placeholder="只读的 input" readonly> <select class="form-select" readonly> <option>只读的 select</option> </select> </code></pre> <p><a href='https://tools.jiyik.com/try_code/bootstrap5_readonly_form_control' class='run-code' target='_blank'>尝试一下</a></p> </blockquote> <p>点击上面的尝试一下查看效果</p> <hr> <h2 id="表单控件的高度调整">表单控件的高度调整</h2> <p>我们还可以轻松更改输入框和选择框的高度来和按钮大小相匹配。</p> <p>在input 输入框上使用控制表单控件高度的类，例如 <code>.form-control-lg</code> 和 <code>.form-control-sm</code>。 看下面的例子：</p> <blockquote class="alert alert-info"> <pre><code class="language-html"><div class="row mb-3"> <label class="col-sm-2 col-form-label col-form-label-lg">email</label> <div class="col-sm-10"> <input type="email" class="form-control form-control-lg" placeholder="large input"> </div> </div> <div class="row mb-3"> <label class="col-sm-2 col-form-label">email</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="default input"> </div> </div> <div class="row"> <label class="col-sm-2 col-form-label">email</label> <div class="col-sm-10"> <input type="email" class="form-control form-control-sm" placeholder="small input"> </div> </div> </code></pre> <p><a href='https://tools.jiyik.com/try_code/bootstrap5_input_height_size' class='run-code' target='_blank'>尝试一下</a></p> </blockquote> <p>上面示例显示的输入框的样式如下所示</p> <p><img src="/uploads/211119/i_202111191003419b375e.jpg" alt="bootstrap5 输入框高度大小调整"></p> <blockquote class="alert alert-warning"> <p><strong><code>提示</code></strong> ：确保在 <label> 或 <legend> 元素上添加类 <strong>.col-form-label-lg</strong> 或 <strong>.col-form-label-sm</strong> 从而保证可以根据表单控件正确调整标签大小。</p> </blockquote></div> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> <a href="/w/bootstrap5/bootstrap5-list-groups"> <span class="iconfont" style="color: #387a9f;"></span> </a> <a href="/w/bootstrap5/bootstrap5-list-groups" rel="prev" title="bootstrap5 列表组 (list groups)">bootstrap5 列表组 (list groups)</a> </div> <div class="next-design-link"> <a href="/w/bootstrap5/bootstrap5-form-validation" rel="next" title="bootstrap5 表单验证">bootstrap5 表单验证</a> <a href="/w/bootstrap5/bootstrap5-form-validation"> <span class="iconfont" style="color: #387a9f;"></span> </a> </div> </div> </div> <div style="margin-bottom:10px;"> <style> .responsive_ad1 { display:inline-block;} @media (max-width: 500px) { .responsive_ad1 { display: none; } } @media(min-width: 800px) { .responsive_ad1 { width: 840px; height: 100px; } } </style> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9072260435000715" crossorigin="anonymous"></script> <ins class="adsbygoogle responsive_ad1" style="min-width:500px;max-width:840px;width:100%;height:100px;" data-ad-client="ca-pub-9072260435000715" data-ad-slot="8089067372" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="jyk_question_comments"> <h2 class=""> <div class="altblock" data-expand="0"> <i style="font-size:24px;padding-right:0px;" class="iconfont" aria-hidden="true"></i> </div> <span class="mw-headline" id="qa_headline">查看笔记</span> </h2> </div> <div class="leave-message" id="leave-message" style="display:none;"></div> </section> </main> <aside class="question_right mt15"> <div class="right_nav"> <h2> <span class="iconfont"></span>分类导航 </h2> <ul class="two_nav"> <li class="two_nav_item"> <a href="javascript:;" >服务端</a> <ul class="three_nav"> <li><a href="/w/ba4j11165">正则表达式</a></li> <li><a href="/w/perl">perl 教程</a></li> <li><a href="/w/hjsp35191">php-正则</a></li> <li><a href="/w/java">java 教程</a></li> <li><a href="/w/php">php教程</a></li> <li><a href="/w/php7">php7 教程</a></li> <li><a href="/w/python">python 教程</a></li> <li><a href="/w/lua">lua 教程</a></li> <li><a href="/w/python3">python 3 教程</a></li> <li><a href="/w/go">go 教程</a></li> <li><a href="/w/graphql">graphql 教程</a></li> <li><a href="/w/node">nodejs 教程</a></li> </ul> </li> <li class="two_nav_item"> <a href="javascript:;" >web端</a> <ul class="three_nav"> <li><a href="/w/css3">css3 教程</a></li> <li><a href="/w/html">html 教程</a></li> <li><a href="/w/html5">html5 教程</a></li> <li><a href="/w/css">css 教程</a></li> <li><a href="/w/sass">sass 教程</a></li> <li><a href="/w/less">less 教程</a></li> <li><a href="/w/wp">wordpress</a></li> <li><a href="/w/svg">svg 教程</a></li> <li><a href="/w/xml">xml教程</a></li> <li><a href="/w/bootstrap5">bootstrap 5 教程</a></li> <li><a href="/w/bootstrap4">bootstrap 4 教程</a></li> <li><a href="/w/bootstrap3">bootstrap 3 教程</a></li> </ul> </li> <li class="two_nav_item"> <a href="javascript:;" >javascript</a> <ul class="three_nav"> <li><a href="/w/ts">typescript 教程</a></li> <li><a href="/w/popperjs">popper.js 中文教程</a></li> <li><a href="/w/underscore">underscore.js 中文教程</a></li> <li><a href="/w/nextjs">next.js 中文教程</a></li> <li><a href="/w/chartjs">chart.js 中文教程</a></li> <li><a href="/w/dc">dc.js 中文教程</a></li> <li><a href="/w/javascript">javascript 教程</a></li> <li><a href="/w/recoil">recoil.js</a></li> <li><a href="/w/jquery">jquery 教程</a></li> <li><a href="/w/es6">es6 教程</a></li> <li><a href="/w/angularjs">angularjs 教程</a></li> <li><a href="/w/webpack">webpack 教程</a></li> <li><a href="/w/pm2">pm2 教程</a></li> <li><a href="/w/vue">vue.js 教程</a></li> <li><a href="/w/vue3">vue3 教程</a></li> <li><a href="/w/d3">d3.js 教程</a></li> <li><a href="/w/echarts">echarts 教程</a></li> <li><a href="/w/json">json 教程</a></li> </ul> </li> <li class="two_nav_item"> <a href="javascript:;" >数据库</a> <ul class="three_nav"> <li><a href="/w/zqxs17511">redis教程</a></li> <li><a href="/w/mongodb">mongodb 教程</a></li> <li><a href="/w/memcached">memcached 教程</a></li> <li><a href="/w/sql">sql 教程</a></li> <li><a href="/w/sqlite">sqlite 教程</a></li> <li><a href="/w/postgresql">postgresql 教程</a></li> <li><a href="/w/es">elastic search</a></li> <li><a href="/w/db2">db2 教程</a></li> <li><a href="/w/mysql">mysql 教程</a></li> </ul> </li> <li class="two_nav_item"> <a href="javascript:;" >java 技术</a> <ul class="three_nav"> <li><a href="/w/spring">spring 框架</a></li> <li><a href="/w/maven">maven 中文教程</a></li> <li><a href="/w/mybatis">mybatis 中文教程</a></li> <li><a href="/w/spboot">spring boot 中文教程</a></li> <li><a href="/w/sporm">spring boot orm</a></li> <li><a href="/w/hibernate">hibernate 教程</a></li> <li><a href="/w/struts">struts 教程</a></li> <li><a href="/w/log4j">log4j 教程</a></li> <li><a href="/w/slf4j">slf4j 教程</a></li> <li><a href="/w/mapstruct">mapstruct 教程</a></li> <li><a href="/w/java8">java8 教程</a></li> <li><a href="/w/java11">java 11 教程</a></li> <li><a href="/w/gradle">gradle</a></li> <li><a href="/w/neo4j">neo4j 教程</a></li> <li><a href="/w/guava">guava 教程</a></li> </ul> </li> <li class="two_nav_item"> <a href="javascript:;" >后端框架</a> <ul class="three_nav"> <li><a href="/w/laravel">laravel 教程</a></li> <li><a href="/w/nest">nest.js 中文教程</a></li> <li><a href="/w/koa">koa.js 中文教程</a></li> <li><a href="/w/express">express.js 中文教程</a></li> <li><a href="/w/sequelize">sequelize 中文教程</a></li> <li><a href="/w/hapi">hapi 中文教程</a></li> <li><a href="/w/junit">junit 教程</a></li> <li><a href="/w/scrapy">scrapy 教程</a></li> <li><a href="/w/gin">gin 教程</a></li> <li><a href="/w/gorm">gorm 教程</a></li> <li><a href="/w/django">django 教程</a></li> </ul> </li> <li class="two_nav_item"> <a href="javascript:;" >数据分析</a> <ul class="three_nav"> <li><a href="/w/zk">zookeeper</a></li> <li><a href="/w/numpy">numpy 教程</a></li> <li><a href="/w/scipy">scipy 教程</a></li> <li><a href="/w/matplotlib">matplotlib 教程</a></li> <li><a href="/w/pandas">pandas 教程</a></li> </ul> </li> <li class="two_nav_item"> <a href="javascript:;" >开发工具</a> <ul class="three_nav"> <li><a href="/w/docker">docker 教程</a></li> <li><a href="/w/markdown">markdown 教程</a></li> <li><a href="/w/k8s">k8s 教程</a></li> <li><a href="/w/flutter">flutter 教程</a></li> <li><a href="/w/makefile">makefile</a></li> <li><a href="/w/tkinter">tkinter 教程</a></li> <li><a href="/w/matlab">matlab 教程</a></li> <li><a href="/w/git">git 教程</a></li> </ul> </li> <li class="two_nav_item"> <a href="javascript:;" >网络</a> <ul class="three_nav"> <li><a href="/w/website">网站开发教程</a></li> <li><a href="/w/soap">soap</a></li> <li><a href="/w/http">http 教程</a></li> <li><a href="/w/nginx">nginx 教程</a></li> <li><a href="/w/ipv4">ipv4 教程</a></li> <li><a href="/w/ipv6">ipv6 教程</a></li> </ul> </li> <li class="two_nav_item"> <a href="javascript:;" >编程手册</a> <ul class="three_nav"> <li><a href="/w/html-ref">html 参考手册</a></li> <li><a href="/w/jquery/jquery-ref-selectors">jquery 参考手册</a></li> </ul> </li> </ul> </div> <div class="mt15"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9072260435000715" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9072260435000715" data-ad-slot="8124726399" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </div> <script type="text/javascript"> $(function () { $(".two_li .two_li_txt").click(function() { $(this).find("i").toggleclass('on'); $(this).next().slidetoggle(); }) $(".altblock").click(function (e) { if($(this).data('expand') == 0) { $("#leave-message").show(); $(this).data('expand',1); $(this).find("i").html(''); }else{ $("#leave-message").hide(); $(this).data('expand',0); $(this).find("i").html('') } }); hljs.inithighlighting(); // 手机端二级按钮 $(".ej_btn").click(function(event) { $(".question_left").animate({left: 0}, 500); }); $.ajax({ url: '/w/count/a/bootstrap5-form', type: 'post', datatype: 'json', success: function (res) { console.log(res); } }) }); onmpwm({ id:'leave-message', aid:'bootstrap5-form', width:"100%", headtext:"笔记", welcometext:"欢迎留下您的杰作", title:'bootstrap5 表单如何创建', type:2, highlight:true, // 代码是否高亮显示 // placeholder:'我要记笔记...' }); </script> <footer> <div class="foot_wrap"> <dl> <dt>网站导航</dt> <dd><a href="/tm/xwzj" target="_blank">编程</a></dd> <dd><a href="/w" target="_blank">教程</a></dd> <dd><a href="/q" target="_blank">题库</a></dd> <dd><a href="/tm/qwzt" target="_blank">随笔</a></dd> <dd><a href="/tm/liuyan" target="_blank">留言</a></dd> </dl> <dl class="tutorial"> <dt>教程更新</dt> <dd><a href="/w/nextjs/nextjs-impreative-routing" target="_blank">next.js 命令式(imperative)路由</a></dd> <dd><a href="/w/nextjs/nextjs-dynamic-routes" target="_blank">next.js 动态路由</a></dd> <dd><a href="/w/nextjs/nextjs-pre-rendering" target="_blank">next.js 预渲染 pre rendering</a></dd> <dd><a href="/w/nextjs/nextjs-global-css-support" target="_blank">next.js 添加全局内置 css 样式</a></dd> <dd><a href="/w/nextjs/nextjs-css-support" target="_blank">next.js 内置对 css 的支持</a></dd> <dd><a href="/w/nextjs/nextjs-meta-data" target="_blank">next.js 元数据 - meta data</a></dd> <dd><a href="/w/nextjs/nextjs-static-serving" target="_blank">next.js 静态文件服务</a></dd> </dl> <dl> <dt>站点信息</dt> <dd><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=pa0ocagpcasicg18tu0sx1nr" target="_blank" rel="nofollow">意见反馈</a></dd> <dd><a href="/disclaimer" target="_blank" rel="nofollow">免责声明</a></dd> <dd><a href="/tm/zj" target="_blank">足迹</a></dd> </dl> <div class="foot_share"> <img width="140" src="/static/jiyi/v3/img/ew.jpg" alt="小程序：迹忆计算机教程"> <p>扫一扫,随时随地看教程</p> </div> </div> <div class="foot_ag捕鱼王app官网 copyright">design by <a href="/" target="_blank">迹忆客</a> <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">冀icp备15007416号-2</a></div> </footer> <div class="dimmer"></div> <div class="off-canvas"> <div class="canvas-close"> <i></i> </div> <div class="mobile-menu d-block d-xl-none d-lg-none"> </div> </div> <div class="right_fixed"> <a class="return_top iconfont" href="javascript:;" title="返回顶部" style="display:inline-block;"></a> <a class="ew iconfont" href="javascript:;" title="小程序"></a> </div> <div id="bottom-qrcode" class="min_pro" > <div class="text"> <div class="download-text c-font-big">扫码一下</div> <div class="c-font-normal c-color-gray2">查看教程更方便</div> </div> <img class="qrcode" src="/static/jiyi/v3/img/ew.jpg"> </div> <style> .right_fixed{position: fixed;right:1%;bottom: 25%;width:58px;border:1px solid #eee;font-size:24px;} .right_fixed a{width:56px;height:56px;display: inline-block;text-align:center;font-size:30px;line-height:56px;background-color:#fff;padding-right:0;color:#2a7e9f;} .right_fixed .return_top{border-bottom: 1px solid #eee;display: none;} .min_pro{bottom:25%;height: 115px;width:259px;padding: 10px;margin: 0;right: 86px;position: fixed;box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);border-radius:12px;background-color: #fff;display:none;} .min_pro .text{text-align: left;margin-top: 24px;margin-left: 16px;font-size:14px;} /* .min_pro .text::after{content:""; display: block; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #154079; border-width: 6px; position: absolute; bottom: 12%; right: -12px; margin-left: -6px;box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);} */ .min_pro img{position: absolute;width: 100px;height: 100px;top: 7px;right: 16px} </style> <script> $(window).scroll(function(){ var _top = $(document).scrolltop(); if(_top > 200){ $(".return_top").fadein(); }else{ $(".return_top").fadeout(); } }) $(".return_top").click(function(){ $('html,body').animate({scrolltop:0}, 100); return false; }) $(".ew").hover(function(){ $("#bottom-qrcode").show(); },function(){ $("#bottom-qrcode").hide(); }); </script> <script async src="https://www.googletagmanager.com/gtag/js?id=g-hh7bmnwdqh"></script> <script> window.datalayer = window.datalayer || []; function gtag(){datalayer.push(arguments);} gtag('js', new date()); gtag('config', 'g-hh7bmnwdqh'); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createelement("script"); hm.src = "https://hm.baidu.com/hm.js?96a3b22d959b1d2caea488dcccd275d2"; var s = document.getelementsbytagname("script")[0]; s.parentnode.insertbefore(hm, s); })(); </script> <script> (function(){ var el = document.createelement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?86472f8d504d87358aff2b46abbe30ef4b42c9ccd9aa6e93a72da00905da80838538161d7ba7d69bfe7b93bc414b7758ce8074c9b6dd4529067719a8bf38e94a"; el.id = "ttzz"; var s = document.getelementsbytagname("script")[0]; s.parentnode.insertbefore(el, s); })(window) </script> </body> </html>