来源订购（Source Ordering）

优质

小牛编辑

130浏览

2023-12-01

描述 (Description)

源排序类用于在断点之间移动列。子导航可以是在任何设备中将列定位在页面左侧或右侧的选项。 push/pull类可以应用于您希望选择的任何尺寸的设备，例如， medium-push/pull-*, large-push/pull-*, small-push/pull-* 。

例子 (Example)

以下示例演示了在Foundation中使用Source ordering -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
   </head>
   <body>
      <h2>Source Ordering</h2>
      <div class = "row">
         <div class = "small-5 small-push-7 columns" style = "background-color:#8BD6EE;">
            Small push class
         </div>
         <div class = "small-7 small-pull-5 columns" style = "background-color:#C0B0F0;">
            small pull class
         </div>
      </div>
      <div class = "row">
         <div class = "large-2 large-push-10 columns" style = "background-color:#808000;">
            Large push class
         </div>
         <div class = "large-10 large-pull-2 columns" style = "background-color:#FF6347;">
            Large pull class
         </div>
      </div>
      <div class = "row">
         <div class = "medium-9 medium-push-3 columns" style = "background-color:#C0B0F0;">
            Medium push class
         </div>
         <div class = "medium-3 medium-pull-9 columns" style = "background-color:#8BD6EE;">
            Medium pull class
         </div>
      </div>
   </body>
</html>