Devices - Documentation | Front - 基于Boostrap5的多用途响应式模板库

Mobile device mockup.

预览
HTML

              
                <!-- Mobile Device -->
                <figure class="device-mobile">
                  <div class="device-mobile-frame">
                    <img class="device-mobile-img" src="../assets/img/407x867/img2.jpg" alt="图片描述内容">
                  </div>
                </figure>
                <!-- End Mobile Device -->

Browser device mockup.

预览
HTML

              
                <!-- Browser Device -->
                <figure class="device-browser">
                  <div class="device-browser-header">
                    <div class="device-browser-header-btn-list">
                      <span class="device-browser-header-btn-list-btn"></span>
                      <span class="device-browser-header-btn-list-btn"></span>
                      <span class="device-browser-header-btn-list-btn"></span>
                    </div>
                    <div class="device-browser-header-browser-bar">www.htmlstream.com/space/</div>
                  </div>
                  
                  <div class="device-browser-frame">
                    <img class="device-browser-img" src="../assets/img/1618x1010/img1.jpg" alt="图片描述内容">
                  </div>
                </figure>
                <!-- End Browser Device -->

.device-browser-lg size.

预览
HTML

              
                <!-- Browser Device -->
                <figure class="device-browser device-browser-lg">
                  <div class="device-browser-header">
                    <div class="device-browser-header-btn-list">
                      <span class="device-browser-header-btn-list-btn"></span>
                      <span class="device-browser-header-btn-list-btn"></span>
                      <span class="device-browser-header-btn-list-btn"></span>
                    </div>
                    <div class="device-browser-header-browser-bar">www.htmlstream.com/space/</div>
                  </div>
                  
                  <div class="device-browser-frame">
                    <img class="device-browser-img" src="../assets/img/1920x1080/img1.jpg" alt="图片描述内容">
                  </div>
                </figure>
                <!-- End Browser Device -->

预览
HTML

              
                <!-- Devices -->
                <div class="devices">
                  <!-- Mobile Device -->
                  <figure class="device-mobile">
                    <div class="device-mobile-frame">
                      <img class="device-mobile-img" src="../assets/img/407x867/img2.jpg" alt="图片描述内容">
                    </div>
                  </figure>
                  <!-- End Mobile Device -->

                  <!-- Browser Device -->
                  <figure class="device-browser">
                    <div class="device-browser-header">
                      <div class="device-browser-header-btn-list">
                        <span class="device-browser-header-btn-list-btn"></span>
                        <span class="device-browser-header-btn-list-btn"></span>
                        <span class="device-browser-header-btn-list-btn"></span>
                      </div>
                      <div class="device-browser-header-browser-bar">www.htmlstream.com/space/</div>
                    </div>
                    
                    <div class="device-browser-frame">
                      <img class="device-browser-img" src="../assets/img/1618x1010/img1.jpg" alt="图片描述内容">
                    </div>
                  </figure>
                  <!-- End Browser Device -->
                </div>
                <!-- End Devices -->

Use .devices-shadow-none to disable shadow.

预览
HTML

              
                <!-- Devices -->
                <div class="devices devices-shadow-none">
                  <!-- Mobile Device -->
                  <figure class="device-mobile">
                    <div class="device-mobile-frame">
                      <img class="device-mobile-img" src="../assets/img/407x867/img2.jpg" alt="图片描述内容">
                    </div>
                  </figure>
                  <!-- End Mobile Device -->

                  <!-- Browser Device -->
                  <figure class="device-browser">
                    <div class="device-browser-header">
                      <div class="device-browser-header-btn-list">
                        <span class="device-browser-header-btn-list-btn"></span>
                        <span class="device-browser-header-btn-list-btn"></span>
                        <span class="device-browser-header-btn-list-btn"></span>
                      </div>
                      <div class="device-browser-header-browser-bar">www.htmlstream.com/space/</div>
                    </div>
                    
                    <div class="device-browser-frame">
                      <img class="device-browser-img" src="../assets/img/1618x1010/img1.jpg" alt="图片描述内容">
                    </div>
                  </figure>
                  <!-- End Browser Device -->
                </div>
                <!-- End Devices -->