<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在Magento 2中，您可以使用客户端JavaScript和服务器端PHP验证来实现自定义表单验证。以下是实现自定义表单验证的示例代码：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">客户端JavaScript验证：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在您的模块中创建一个JavaScript文件，用于包含您的表单验证逻辑，例如 Vendor_Module/view/frontend/web/js/custom-validation.js</p><pre class="brush:as3;toolbar:false">require([ &nbsp;&nbsp;&#39;jquery&#39;, &nbsp;&nbsp;&#39;jquery/ui&#39;, &nbsp;&nbsp;&#39;jquery/validate&#39; ],&nbsp;function($){ &nbsp;&nbsp;&nbsp;&nbsp;$.validator.addMethod( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;custom-validation-rule&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;(value)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Add&nbsp;your&nbsp;custom&nbsp;validation&nbsp;logic&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;true;&nbsp;//&nbsp;Return&nbsp;true&nbsp;or&nbsp;false&nbsp;based&nbsp;on&nbsp;validation&nbsp;result &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.mage.__(&#39;Your&nbsp;validation&nbsp;error&nbsp;message&#39;) &nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#your-form-id&#39;).validate({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rules:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;form-field-name&#39;:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required:&nbsp;true,&nbsp;//&nbsp;Required&nbsp;validation &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;custom-validation-rule:&nbsp;true&nbsp;//&nbsp;Your&nbsp;custom&nbsp;validation&nbsp;rule &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">将此文件添加到您的布局文件中，例如 Vendor_Module/view/frontend/layout/customer_account_create.xml</p><pre class="brush:as3;toolbar:false">&lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;Vendor_Module::js/custom-validation.js&quot;/&gt; &lt;/head&gt;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">服务器端PHP验证：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在您的模块中创建一个 PHP 验证类，例如 Vendor\Module\Model\Validation.php</p><pre class="brush:as3;toolbar:false">&lt;?php namespace&nbsp;Vendor\Module\Model; use&nbsp;Magento\Framework\Exception\LocalizedException; class&nbsp;Validation { &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;validate($formData) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Add&nbsp;your&nbsp;custom&nbsp;validation&nbsp;logic&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(empty($formData[&#39;field-name&#39;]))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;throw&nbsp;new&nbsp;LocalizedException(__(&#39;Your&nbsp;validation&nbsp;error&nbsp;message&#39;)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;true;&nbsp;//&nbsp;Return&nbsp;true&nbsp;or&nbsp;false&nbsp;based&nbsp;on&nbsp;validation&nbsp;result &nbsp;&nbsp;&nbsp;&nbsp;} }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在您的控制器中使用此类来验证表单数据，例如 Vendor\Module\Controller\Index\Save.php</p><pre class="brush:as3;toolbar:false">&lt;?php namespace&nbsp;Vendor\Module\Controller\Index; use&nbsp;Magento\Framework\App\Action\Action; use&nbsp;Magento\Framework\App\Action\Context; use&nbsp;Magento\Framework\Controller\ResultFactory; use&nbsp;Vendor\Module\Model\Validation; class&nbsp;Save&nbsp;extends&nbsp;Action { &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$validation; &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;__construct( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Context&nbsp;$context, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Validation&nbsp;$validation &nbsp;&nbsp;&nbsp;&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent::__construct($context); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;validation&nbsp;=&nbsp;$validation; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;execute() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$formData&nbsp;=&nbsp;$this-&gt;getRequest()-&gt;getPostValue(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($formData)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$isValid&nbsp;=&nbsp;$this-&gt;validation-&gt;validate($formData); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($isValid)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Do&nbsp;your&nbsp;save&nbsp;action &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$resultRedirect&nbsp;=&nbsp;$this-&gt;resultFactory-&gt;create(ResultFactory::TYPE_REDIRECT); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$resultRedirect-&gt;setUrl($this-&gt;_redirect-&gt;getRefererUrl()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$resultRedirect; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;catch&nbsp;(LocalizedException&nbsp;$e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;messageManager-&gt;addError($e-&gt;getMessage()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Return&nbsp;to&nbsp;the&nbsp;form&nbsp;page&nbsp;with&nbsp;errors &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$resultRedirect&nbsp;=&nbsp;$this-&gt;resultFactory-&gt;create(ResultFactory::TYPE_REDIRECT); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$resultRedirect-&gt;setUrl($this-&gt;_redirect-&gt;getRefererUrl()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$resultRedirect; &nbsp;&nbsp;&nbsp;&nbsp;} }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">请注意，这些只是示例代码，您需要根据您的具体需求进行修改。</p><p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; min-height: 17px; white-space: normal;"><br/></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在Magento 2中实现自定义表单验证规则需要以下步骤：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">创建验证规则类</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">首先，您需要创建一个验证规则类来实现您的自定义验证规则，例如：</p><pre class="brush:as3;toolbar:false">&lt;?php namespace&nbsp;Vendor\Module\Model\Validation; use&nbsp;Magento\Framework\Validator\AbstractValidator; class&nbsp;CustomRule&nbsp;extends&nbsp;AbstractValidator { &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;ERROR_CODE&nbsp;=&nbsp;&#39;ValidationError&#39;; &nbsp;&nbsp;&nbsp;&nbsp;/** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Validate&nbsp;value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@param&nbsp;mixed&nbsp;$value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@return&nbsp;bool &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;isValid($value) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$isValid&nbsp;=&nbsp;true;&nbsp;//&nbsp;your&nbsp;validation&nbsp;logic &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!$isValid)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;_addMessages([self::ERROR_CODE&nbsp;=&gt;&nbsp;__(&#39;Your&nbsp;error&nbsp;message.&#39;)]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;} }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">注册验证规则</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">接下来，您需要在模块的 di.xml 文件中注册自定义验证规则类，例如：</p><pre class="brush:as3;toolbar:false">&lt;config&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;type&nbsp;name=&quot;Magento\Framework\Validator\Factory&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;arguments&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;validators&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;custom_rule&quot;&nbsp;xsi:type=&quot;object&quot;&gt;Vendor\Module\Model\Validation\CustomRule&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/arguments&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/type&gt; &lt;/config&gt;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">将规则应用于表单字段</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">最后，您需要将自定义验证规则应用于表单字段中，例如：</p><pre class="brush:as3;toolbar:false">&lt;field&nbsp;name=&quot;field_name&quot;&nbsp;sortOrder=&quot;40&quot;&nbsp;formElement=&quot;input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;data&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;config&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;validation&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;custom_rule&quot;&nbsp;xsi:type=&quot;boolean&quot;&gt;true&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;settings&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;required&gt;true&lt;/required&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;validation&gt;true&lt;/validation&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/settings&gt; &lt;/field&gt;</pre><p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;PingFang SC&quot;; white-space: normal;">这将会将自定义验证规则<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;Helvetica Neue&quot;;"> custom_rule </span>应用于字段<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;Helvetica Neue&quot;;"> field_name </span>上，并且当字段未通过验证时将显示错误消息。</p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中，您可以使用字典来定义一组特定的字符串，以便稍后在代码中使用。这是一种管理字符串的有效方法，因为它可以使您在代码中更轻松地进行更改和重复使用。以下是在 Magento 2 中使用字典自定义字符串的代码示例：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">首先，在您的自定义模块的目录下创建一个名为 i18n 的文件夹（如果尚未存在）。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 i18n 文件夹中创建一个名为 en_US.csv 的文件。这是您的字典文件，其中“en_US”是语言和地区的标识符，表示英语（美国）。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 en_US.csv 文件中，输入以下内容：</p><pre class="brush:as3;toolbar:false">&quot;Hello&quot;,&quot;Hello&quot; &quot;My&nbsp;Custom&nbsp;String&quot;,&quot;My&nbsp;Custom&nbsp;String&quot;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">这些行定义了两个字符串：Hello 和 My Custom String。左侧的字符串是标识符，右侧的字符串是实际要显示的文本。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在您的代码中，您可以使用以下代码加载字典并获取字符串：</p><pre class="brush:as3;toolbar:false">namespace&nbsp;Your\Module\Block; use&nbsp;Magento\Framework\View\Element\Template; class&nbsp;YourBlock&nbsp;extends&nbsp;Template { &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$_objectManager; &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$_helperData; &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;__construct( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Template\Context&nbsp;$context, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\Your\Module\Helper\Data&nbsp;$helperData, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;array&nbsp;$data&nbsp;=&nbsp;[] &nbsp;&nbsp;&nbsp;&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;_objectManager&nbsp;=&nbsp;\Magento\Framework\App\ObjectManager::getInstance(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;_helperData&nbsp;=&nbsp;$helperData; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent::__construct($context,&nbsp;$data); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;getHelloString() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this-&gt;_helperData-&gt;__(&#39;Hello&#39;); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;getCustomString() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this-&gt;_helperData-&gt;__(&#39;My&nbsp;Custom&nbsp;String&#39;); &nbsp;&nbsp;&nbsp;&nbsp;} }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在上面的示例中，__() 是 Magento 2 提供的翻译函数，它将在字典中查找与传递的字符串标识符匹配的文本，并返回文本。请注意，__() 函数是在 _helperData 对象上调用的，这是您自己的帮助程序类，其中包含 __() 函数的定义。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">这就是如何在 Magento 2 中使用字典自定义字符串的简单示例。您可以在 en_US.csv 文件中添加更多字符串，并在您的代码中使用相应的 __() 调用来获取这些字符串。</p><p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; min-height: 17px; white-space: normal;"><br/></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中，您可以创建响应式移动主题，以便您的在线商店可以在移动设备上优雅地呈现。以下是在 Magento 2 中创建响应式移动主题的一些步骤和示例代码：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">创建一个新的主题目录。在 Magento 2 中，主题通常存储在 app/design/frontend/&lt;Vendor&gt;/&lt;Theme&gt; 目录中。在该目录下创建一个新的子目录，例如 mobile。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 mobile 目录中，创建一个名为 theme.xml 的文件。该文件应包含以下内容：</p><pre class="brush:as3;toolbar:false">&lt;theme&nbsp;xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;&nbsp;xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:Config/etc/theme.xsd&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Mobile&nbsp;Theme&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;parent&gt;Magento/blank&lt;/parent&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;media&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;preview_image&gt;media/preview.jpg&lt;/preview_image&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/media&gt; &lt;/theme&gt;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">上述 theme.xml 文件中，您需要定义主题的标题，指定父主题和指定预览图像的路径。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 mobile 目录中，创建一个名为 registration.php 的文件。该文件应包含以下内容：</p><pre class="brush:as3;toolbar:false">use&nbsp;\Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register( &nbsp;&nbsp;&nbsp;&nbsp;ComponentRegistrar::THEME, &nbsp;&nbsp;&nbsp;&nbsp;&#39;frontend/&lt;Vendor&gt;/mobile&#39;, &nbsp;&nbsp;&nbsp;&nbsp;__DIR__ );</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">这将注册您的主题。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 mobile 目录中，创建一个名为 web 的子目录。在 web 目录中，创建一个名为 css 的子目录，并在其中创建一个名为 source 的子目录。在 source 目录中，您可以创建 CSS 文件，并使用响应式设计技术将其适应于不同的屏幕大小。例如，以下是一个名为 styles.css 的示例文件，它包含了一些简单的 CSS 样式：</p><pre class="brush:as3;toolbar:false">@media&nbsp;(max-width:&nbsp;767px)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;Mobile-specific&nbsp;styles&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;14px; &nbsp;&nbsp;&nbsp;&nbsp;} } @media&nbsp;(min-width:&nbsp;768px)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;Tablet-specific&nbsp;styles&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;16px; &nbsp;&nbsp;&nbsp;&nbsp;} } @media&nbsp;(min-width:&nbsp;992px)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;Desktop-specific&nbsp;styles&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;18px; &nbsp;&nbsp;&nbsp;&nbsp;} }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在上述示例中，@media 声明用于指定屏幕大小范围，并在其中定义适用于不同设备的不同样式。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">最后，清除 Magento 的缓存，然后在后台选择您的新主题。您可以在 Magento 后台的“内容”&gt;“配置”&gt;“主题”部分中找到此选项。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">这就是在 Magento 2 中创建响应式移动主题的简单示例。通过适当地定义 CSS 样式和使用响应式设计技术，您可以轻松地为移动设备创建美观的主题。</p><p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; min-height: 17px; white-space: normal;"><br/></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中，响应式网页设计中的 JavaScript 主要用于处理响应式布局，例如屏幕大小更改时调整页面元素的大小和位置。以下是在 Magento 2 中使用 JavaScript 的一些示例代码：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">使主菜单在小屏幕上可见：在 Magento 2 中，主菜单默认隐藏在小屏幕上，以便节省空间。但是，您可以使用 JavaScript 让菜单在小屏幕上可见。以下是示例代码：</p><pre class="brush:as3;toolbar:false">require([ &nbsp;&nbsp;&nbsp;&nbsp;&#39;jquery&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&#39;domReady!&#39; ],&nbsp;function($)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.nav-toggle&#39;).click(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.nav-items&#39;).toggleClass(&#39;active&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}); });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">上述示例中，nav-toggle 类指定了菜单开关按钮，nav-items 类指定了菜单元素。当按钮被单击时，active 类将在菜单元素上进行切换，从而使其可见或隐藏。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">调整页面元素的大小和位置：在响应式设计中，页面元素的大小和位置可能需要在不同的屏幕大小下进行调整。以下是示例代码：</p><pre class="brush:as3;toolbar:false">require([ &nbsp;&nbsp;&nbsp;&nbsp;&#39;jquery&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&#39;domReady!&#39; ],&nbsp;function($)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(window).resize(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;windowWidth&nbsp;=&nbsp;$(window).width(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(windowWidth&nbsp;&lt;&nbsp;768)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.page-title&#39;).insertBefore(&#39;.page-main&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.page-title&#39;).insertAfter(&#39;.page-breadcrumbs&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">上述示例中，resize 事件指定了在窗口大小更改时应执行的函数。在此示例中，当窗口宽度小于 768 像素时，页面标题将移到页面主要部分的前面，否则它将移到页面面包屑的后面。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;"><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">这只是</span> Magento 2 <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">中使用</span> JavaScript <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">的一些简单示例。通过正确使用</span> JavaScript<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">，您可以使您的</span> Magento 2 <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">网站更具交互性和响应性。</span></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中，响应式设计需要使用 CSS 来实现不同设备的布局和样式。以下是一些响应式设计中使用的 CSS 代码示例：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">媒体查询：使用媒体查询可以根据不同设备的屏幕尺寸来设置不同的 CSS 样式。例如：</p><pre class="brush:as3;toolbar:false">/*&nbsp;对于屏幕宽度小于&nbsp;768&nbsp;像素的设备，设置导航栏为垂直布局&nbsp;*/ @media&nbsp;(max-width:&nbsp;768px)&nbsp;{ &nbsp;&nbsp;.navbar&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;flex-direction:&nbsp;column; &nbsp;&nbsp;} } 弹性盒子布局（Flexbox&nbsp;Layout）：使用弹性盒子布局可以方便地实现响应式布局。例如： /*&nbsp;将容器设置为弹性盒子，并使其内部的项目水平居中&nbsp;*/ .container&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;justify-content:&nbsp;center; &nbsp;&nbsp;align-items:&nbsp;center; } 栅格系统（Grid&nbsp;System）：栅格系统可以帮助我们将页面分成多个网格，并将内容放入这些网格中。例如： /*&nbsp;将页面分成三个网格&nbsp;*/ .container&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-columns:&nbsp;repeat(3,&nbsp;1fr); } /*&nbsp;在第一个网格中放置一个图片&nbsp;*/ .image&nbsp;{ &nbsp;&nbsp;grid-column:&nbsp;1; } /*&nbsp;在第二个网格中放置一个标题和一些文本&nbsp;*/ .title&nbsp;{ &nbsp;&nbsp;grid-column:&nbsp;2; &nbsp;&nbsp;grid-row:&nbsp;1; } .text&nbsp;{ &nbsp;&nbsp;grid-column:&nbsp;2; &nbsp;&nbsp;grid-row:&nbsp;2; } /*&nbsp;在第三个网格中放置一个按钮&nbsp;*/ .button&nbsp;{ &nbsp;&nbsp;grid-column:&nbsp;3; }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">以上是一些常见的响应式设计中使用的 CSS 代码示例。通过使用这些代码，可以实现在不同设备上呈现不同的布局和样式，提高用户体验和页面响应性。</p><p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; min-height: 17px; white-space: normal;"><br/></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中添加自定义 CSS 预处理器可以帮助您更高效地管理和开发样式表。以下是使用自定义 CSS 预处理器的代码示例：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">创建自定义 CSS 预处理器</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 根目录中创建一个名为 app/design/frontend/&lt;Vendor&gt;/&lt;Theme&gt;/web/css/source/_custom.less 的文件，并添加以下代码：</p><pre class="brush:as3;toolbar:false">@primary-color:&nbsp;#007bff; body&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;#f8f8f8; &nbsp;&nbsp;color:&nbsp;#333; } h1,&nbsp;h2,&nbsp;h3&nbsp;{ &nbsp;&nbsp;color:&nbsp;@primary-color; }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">这个代码定义了一个名为 @primary-color 的 LESS 变量，并在样式表中使用它来设置标题的颜色。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">配置 Magento 2</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 根目录中打开 app/design/frontend/&lt;Vendor&gt;/&lt;Theme&gt;/requirejs-config.js 文件，并添加以下代码：</p><pre class="brush:as3;toolbar:false">var&nbsp;config&nbsp;=&nbsp;{ &nbsp;&nbsp;map:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&#39;*&#39;:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;custom:&nbsp;&#39;js/custom&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;less:&nbsp;&#39;js/less&#39; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}, &nbsp;&nbsp;paths:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;less:&nbsp;&#39;js/less&#39;, &nbsp;&nbsp;&nbsp;&nbsp;lessc:&nbsp;&#39;js/lessc.min&#39;, &nbsp;&nbsp;&nbsp;&nbsp;lessOpts:&nbsp;&#39;js/lessOpts&#39; &nbsp;&nbsp;}, &nbsp;&nbsp;shim:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;lessc:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exports:&nbsp;&#39;less&#39; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;lessOpts:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deps:&nbsp;[&#39;lessc&#39;] &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}, &nbsp;&nbsp;config:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;mixins:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;mage/apply/main&#39;:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;js/apply-mixin&#39;:&nbsp;true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} };</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">这个代码将 less 和 lessc 库添加到 Magento 2 的 JavaScript 依赖项中，并配置了 apply-mixin。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">创建 LESS 编译器</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 根目录中创建一个名为 app/design/frontend/&lt;Vendor&gt;/&lt;Theme&gt;/web/js/less.js 的文件，并添加以下代码：</p><pre class="brush:as3;toolbar:false">define([ &nbsp;&nbsp;&#39;jquery&#39;, &nbsp;&nbsp;&#39;lessc&#39;, &nbsp;&nbsp;&#39;lessOpts&#39; ],&nbsp;function($,&nbsp;lessc,&nbsp;lessOpts)&nbsp;{ &nbsp;&nbsp;&#39;use&nbsp;strict&#39;; &nbsp;&nbsp;$.widget(&#39;custom.less&#39;,&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;options:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lessUrl:&nbsp;&#39;/&lt;Vendor&gt;/&lt;Theme&gt;/en_US/css/custom.less&#39; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;_create:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;self&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;lessUrl&nbsp;=&nbsp;this.options.lessUrl; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;lessUrl, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;&#39;text&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lessc.render(data,&nbsp;lessOpts,&nbsp;function(css)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;head&#39;).append(&#39;&lt;style&gt;&#39;&nbsp;+&nbsp;css&nbsp;+&nbsp;&#39;&lt;/style&gt;&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}); &nbsp;&nbsp;return&nbsp;$.custom.less; });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">这个代码定义了一个名为 less 的 JavaScript 模块，并使用它来加载、编译和注入自定义 LESS 样式表。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">添加 apply-mixin</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 根目录中创建一个名为 app/design/frontend/&lt;Vendor&gt;/&lt;Theme&gt;/web/js/apply-mixin.js 的文件，并添加以下代码：</p><pre class="brush:as3;toolbar:false">define([ &nbsp;&nbsp;&#39;jquery&#39;, &nbsp;&nbsp;&#39;mage/apply/main&#39; ],&nbsp;function($,&nbsp;mageApply)&nbsp;{ &nbsp;&nbsp;&#39;use&nbsp;strict&#39;; &nbsp;&nbsp;return&nbsp;function(target)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$.widget(&#39;mage.apply&#39;,&nbsp;target,&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_loadFiles:&nbsp;function(files,&nbsp;callback)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;lessFile&nbsp;=&nbsp;files.filter(function(file)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;file.indexOf(&#39;custom.less&#39;)&nbsp;!==&nbsp;-1; &nbsp;&nbsp;&nbsp;&nbsp;})[0]; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(lessFile)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;require([&#39;less&#39;],&nbsp;function(less)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;require([&#39;lessOpts&#39;],&nbsp;function(lessOpts)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;less.render(&#39;@import&nbsp;&quot;&#39;&nbsp;+&nbsp;lessFile&nbsp;+&nbsp;&#39;&quot;;&#39;,&nbsp;lessOpts,&nbsp;function(css)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;head&#39;).append(&#39;&lt;style&gt;&#39;&nbsp;+&nbsp;css.css&nbsp;+&nbsp;&#39;&lt;/style&gt;&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback(files); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._super(files,&nbsp;callback); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} }); return&nbsp;target; }; });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">这个代码添加了一个名为 `apply-mixin` 的 Magento 2 mixins，并使用它来加载、编译和注入自定义 LESS 样式表。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">5. 保存文件并清除缓存</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">保存文件后，需要清除 Magento 2 的缓存，以便应用更改。可以通过在命令行中运行以下命令来清除缓存：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">php bin/magento cache:clean</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">Copy code</p><p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;PingFang SC&quot;; white-space: normal;">现在，您可以使用自定义<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;Helvetica Neue&quot;;"> CSS </span>预处理器来开发<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;Helvetica Neue&quot;;"> Magento 2 </span>主题。</p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p>Magento 2 的 CSS 关键路径通常包括以下文件：</p><p><br/></p><ol class=" list-paddingleft-2" style="list-style-type: decimal;"><li><p>lib/web/css/source/lib/variables/_colors.less：定义了页面上使用的颜色变量。</p></li><li><p>lib/web/css/source/lib/variables/_responsive.less：定义了响应式设计所使用的媒体查询。</p></li><li><p>lib/web/css/source/lib/variables/_typography.less：定义了页面上使用的字体变量。</p></li><li><p>lib/web/css/source/lib/_responsive.less：定义了响应式设计的样式。</p></li><li><p>lib/web/css/source/_module.less：定义了 Magento 2 的基础样式和布局。</p></li><li><p>lib/web/css/source/_theme.less：定义了主题特定的样式。</p></li></ol><p>下面是一个简单的 Magento 2 CSS 代码示例，其中包含了一些常用的样式：</p><p><br/></p><p><br/></p><pre class="brush:as3;toolbar:false">//定义主题特定的颜色 @color-primary:&nbsp;#007bff; @color-secondary:&nbsp;#6c757d; //定义字体大小 @font-size-base:&nbsp;16px; //定义响应式设计媒体查询 @media&nbsp;(min-width:&nbsp;768px)&nbsp;{ //&nbsp;样式 } //定义页面元素的基本样式 body&nbsp;{ font-family:&nbsp;Arial,&nbsp;sans-serif; font-size:&nbsp;@font-size-base; color:&nbsp;#333; } h1&nbsp;{ font-size:&nbsp;2.5rem; color:&nbsp;@color-primary; } p&nbsp;{ font-size:&nbsp;1.6rem; line-height:&nbsp;1.4; } //定义按钮样式 .button&nbsp;{ display:&nbsp;inline-block; font-size:&nbsp;1.4rem; padding:&nbsp;0.8rem&nbsp;1.6rem; border:&nbsp;none; border-radius:&nbsp;4px; background-color:&nbsp;@color-primary; color:&nbsp;#fff; } //定义链接样式 a&nbsp;{ color:&nbsp;@color-primary; text-decoration:&nbsp;none; &amp;:hover&nbsp;{ color:&nbsp;@color-secondary; text-decoration:&nbsp;underline; } }</pre><p>注意，这只是一个简单的示例，Magento 2 的 CSS 文件包含了大量的样式和变量，实际使用时需要根据具体的需求进行定制。</p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p>Magento 2 使用 jQuery UI 提供了一些基础的 UI 样式，包括按钮、表单、对话框等。</p><p>下面是一个简单的 Magento 2 jQuery UI 代码示例，其中包含了一些常用的 UI 组件：</p><pre class="brush:as3;toolbar:false">&lt;div&nbsp;class=&quot;ui-widget&quot;&gt; &lt;label&nbsp;for=&quot;datepicker&quot;&gt;选择日期：&lt;/label&gt; &lt;input&nbsp;type=&quot;text&quot;&nbsp;id=&quot;datepicker&quot;&gt; &lt;/div&gt; &lt;button&nbsp;id=&quot;btn-submit&quot;&nbsp;class=&quot;ui-button&nbsp;ui-widget&nbsp;ui-corner-all&quot;&gt;提交&lt;/button&gt; &lt;div&nbsp;id=&quot;dialog-confirm&quot;&nbsp;title=&quot;确认删除？&quot;&gt; &lt;p&gt;&lt;span&nbsp;class=&quot;ui-icon&nbsp;ui-icon-alert&quot;&nbsp;style=&quot;float:left;&nbsp;margin:0&nbsp;7px&nbsp;20px&nbsp;0;&quot;&gt;&lt;/span&gt;确认删除此项？&lt;/p&gt; &lt;/div&gt;</pre><p>上述代码使用了 jQuery UI 提供的日期选择器、按钮和对话框组件。需要注意的是，要正确引入 jQuery UI 样式，需要在 Magento 2 的布局文件中加入以下代码：</p><pre class="brush:as3;toolbar:false">&lt;head&gt; &lt;css&nbsp;src=&quot;Magento_Theme::jquery-ui.css&quot;/&gt; &lt;/head&gt;</pre><p>这样才能正确加载 jQuery UI 样式。</p><p>另外，如果需要对 jQuery UI 组件进行定制，可以参考 Magento 2 的源代码中 lib/web/jquery-ui.theme.css 和 lib/web/jquery-ui.structure.css 文件，这些文件包含了 jQuery UI 的基础样式和变量。</p><p><br/></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p>Magento 2 使用了 Bootstrap 作为界面库，提供了一些常用的 UI 组件，如网格系统、表单、按钮等。</p><p>下面是一个简单的 Magento 2 Bootstrap 代码示例，其中包含了一些常用的组件：</p><pre class="brush:as3;toolbar:false">&lt;div&nbsp;class=&quot;container&quot;&gt; &lt;div&nbsp;class=&quot;row&quot;&gt; &lt;div&nbsp;class=&quot;col-md-6&quot;&gt; &lt;form&gt; &lt;div&nbsp;class=&quot;form-group&quot;&gt; &lt;label&nbsp;for=&quot;input-name&quot;&gt;姓名：&lt;/label&gt; &lt;input&nbsp;type=&quot;text&quot;&nbsp;class=&quot;form-control&quot;&nbsp;id=&quot;input-name&quot;&gt; &lt;/div&gt; &lt;div&nbsp;class=&quot;form-group&quot;&gt; &lt;label&nbsp;for=&quot;input-email&quot;&gt;邮箱：&lt;/label&gt; &lt;input&nbsp;type=&quot;email&quot;&nbsp;class=&quot;form-control&quot;&nbsp;id=&quot;input-email&quot;&gt; &lt;/div&gt; &lt;button&nbsp;type=&quot;submit&quot;&nbsp;class=&quot;btn&nbsp;btn-primary&quot;&gt;提交&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;div&nbsp;class=&quot;col-md-6&quot;&gt; &lt;img&nbsp;src=&quot;example.jpg&quot;&nbsp;alt=&quot;Example&nbsp;image&quot;&nbsp;class=&quot;img-thumbnail&quot;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>上述代码使用了 Bootstrap 的网格系统、表单和按钮组件。需要注意的是，在 Magento 2 的布局文件中，需要引入 Bootstrap 的 CSS 和 JavaScript 文件：</p><pre class="brush:as3;toolbar:false">&lt;head&gt; &lt;css&nbsp;src=&quot;Magento_Theme::css/bootstrap.min.css&quot;/&gt; &lt;css&nbsp;src=&quot;Magento_Theme::css/bootstrap-theme.min.css&quot;/&gt; &lt;script&nbsp;src=&quot;Magento_Theme::js/bootstrap.min.js&quot;/&gt; &lt;/head&gt;</pre><p>这样才能正确加载 Bootstrap 的样式和脚本。</p><p>另外，如果需要对 Bootstrap 组件进行定制，可以参考 Magento 2 的源代码中 lib/web/css/source/lib/bootstrap 文件夹，这些文件包含了 Bootstrap 的基础样式和变量。</p><p><br/></p>