## 頁面布局 頁面由組件構成，頁面的高度和寬度由組件的高度和寬度確定，當頁面的高度大于屏幕的高度，或者頁面的寬度大于屏幕的寬度，頁面就會出現滾動條。 * 頁面指的是w文件 * 屏幕指的是門戶中用于顯示功能界面的區域 # 目錄 * [1、流式布局](http://wex5.com/cn/?p=4784#1) * [2、充滿布局](http://wex5.com/cn/?p=4784#2.1) * [2.1、左右充滿](http://wex5.com/cn/?p=4784#2.1) * [2.2、上下充滿](http://wex5.com/cn/?p=4784#2.2) * [2.3、多標簽頁充滿](http://wex5.com/cn/?p=4784#2.3) * [3、響應式布局](http://wex5.com/cn/?p=4784#3) * [4、手機界面布局](http://wex5.com/cn/?p=4784#4.1) * [4.1、顯示多頁](http://wex5.com/cn/?p=4784#4.1) * [4.2、顯示多行信息（一行顯示一條記錄](http://wex5.com/cn/?p=4784#4.2)） * [4.3、顯示多行信息（一行顯示多條記錄](http://wex5.com/cn/?p=4784#4.3)） * [5、總結](http://wex5.com/cn/?p=4784#5.1) * [5.1、組件的高度](http://wex5.com/cn/?p=4784#5.1) * [5.2、幾種布局使用組件對比](http://wex5.com/cn/?p=4784#5.2) 下面分別介紹流式布局、充滿布局、響應式布局、手機界面布局等頁面布局方式。 # 1、流式布局 下圖為流式布局，流式布局的特點是組件順序向下排列，頁面內部不出現滾動條，整個頁面出現一個滾動條。例如：演示案例中的訂單申請功能。 [](https://box.kancloud.cn/2015-09-23_56018bbc9c524.jpg) # 2、充滿布局 下圖為充滿布局，充滿布局的特點是整個頁面不出現滾動條，頁面內部的組件出現滾動條。 ## 2.1、左右充滿 [](https://box.kancloud.cn/2015-09-23_56018bc2aec4f.jpg) 上圖為組織權限中的組織管理功能，組織管理分為左右兩個區域， 1. 設置為充滿布局——給window組件增加一個class：x-full-screen 2. 顯示左右兩個區域——使用row(bootstrap)組件，row下面有兩個col，row和col都設置height:100%。左右兩個區域占屏幕的比例通過col的class設置，左邊的col的class屬性為col-xs-3，右邊的col的class屬性為col-xs-9，表示左右區域的寬度比為1:3，這里使用的是bbotstrap的樣式，屏幕寬度為12，左右兩列加起來是12，就表示會占滿整個屏幕 3. 左邊——放一個grid組件，設置height:100%;width:100%,清空column的width屬性 4. 右邊——分為上中下3個部分，使用panel組件，class屬性只保留x-panel，并且設置height:100%，content里面放dataTables組件 ## 2.2、上下充滿 [](https://box.kancloud.cn/2015-09-23_56018bc356d73.jpg) 上圖為組織權限中的分級管理功能，分級管理分為左右兩個區域，右邊區域再分為上下兩個區域，設置基本和組織管理的設置一樣，不同之處在于 * 右邊分為上下兩個區域，放兩個panel組件，class屬性只保留x-panel，并且設置height:50%，這樣就是平分，可以設置為其它的百分數 ## 2.3、多標簽頁充滿 [](https://box.kancloud.cn/2015-09-23_56018bc699f0f.jpg) 上圖為組織權限中的權限查詢功能，權限查詢分為兩個標簽頁，使用tabs組件實現標簽頁，標簽頁里面組件的設置基本和組織管理的設置一樣 # 3、響應式布局 X5的樣式基于 Bootstrap，Bootstrap提供了響應式布局，可以通過同一份代碼快速、有效適配手機、平板、PC 設備，下面兩幅圖分別是在不同分辨率的兩臺計算機上面的顯示效果，第一幅圖的分辨率是1280*720，顯示三列信息，第二幅圖的分辨率是1024*768，顯示兩列信息。 [](https://box.kancloud.cn/2015-09-23_56018bc758b4b.png) [](https://box.kancloud.cn/2015-09-23_56018bccbb1f6.png) 使用響應式布局可以適應不同的分辨率，在大分辨率時，多顯示信息，在小分辨率時，少顯示信息。這樣的響應式布局是如何設置的呢？ [](https://box.kancloud.cn/2015-09-23_56018bcd2c9c8.jpg) 答案就是使用row(bootstrap)組件，在row里面添加列col，設置col的樣式 [](https://box.kancloud.cn/2015-09-23_56018bcdd7eef.jpg) 目前，是將屏幕寬度分為4個區間，小于768，大于768且小于992，大于992且小于1200，大于1200，屏幕的寬度平均劃分成12等份，設置每一列在每個區間占幾等份，就可以實現不同分辨率時，界面的顯示效果不同。 例如：本例中col設置了col-lg-4的樣式，表示在分辨率大于1200時，占三分之一，所以一行顯示了三列，同時設置了col-md-6的樣式，表示在分辨率大于992且小于1200時，占二分之一，所以一行顯示了兩列，可以預見，在屏幕分辨率小于768時，一行將顯示一列。 # 4、手機界面布局 ## 4.1、顯示多頁 [](https://box.kancloud.cn/2015-09-23_56018bd3b51c4.jpg) 象外賣這種有四頁的界面在手機應用中是很常見的，使用contents組件和buttonGroup組件實現。 [](https://box.kancloud.cn/2015-09-23_56018bd435a7e.jpg) 以外賣為例：contents組件添加四個content，buttonGroup組件添加四個button，設置每個button的target屬性為對應的content的xid。 ## 4.2、顯示多行信息（一行顯示一條記錄） [](https://box.kancloud.cn/2015-09-23_56018bd4e84a1.jpg) 象請假管理這種展示多條記錄的界面在手機應用中是很常見的，使用list組件和row組件實現。 [](https://box.kancloud.cn/2015-09-23_56018bd5598e8.jpg) 以請假管理為例：在list組件中放row組件，row分為兩列，左邊的列里面放orgImage組件顯示人員頭像，右邊的列里面在放row組件，每個行里面設置兩列。每個列可以設置寬度、可以設置垂直對齊方式。 列寬度的設置 * 百分比——class屬性設置x-col-25等樣式，表示占屏幕寬度的百分比 * 固定值——class屬性設置x-col-fixed，style屬性設置width:100px，設置具體的寬度值 * 由內容決定——class屬性設置x-col-fixed，style屬性設置width:auto * 列寬平分——class屬性不設置樣式 列垂直對齊方式的設置 * 靠上——x-col-top * 居中——x-col-center * 靠下——x-col-bottom 如果需要實現分頁加載數據，先放scrollview組件，再放list組件。 ## 4.3、顯示多行信息（一行顯示多條記錄） [](https://box.kancloud.cn/2015-09-23_56018bd86fb32.jpg) 這種情況，只需要在list組件里面的li節點上的style屬性中增加width和float:left即可，width可以是百分比，也可以是固定值。 [](https://box.kancloud.cn/2015-09-23_56018bd8d6e22.jpg) # 5、總結 ## 1、組件的高度 * 設置為固定——例如：height:200px * 設置為充滿——height:100% * 設置為不固定——不設置height，grid組件的height設置為auto 固定和充滿都可能出現滾動條，不固定就是有多長顯示多長，因此不會出現滾動條。在外層組件有高度的情況下，才能設置組件的高度為充滿， * 在流式布局中組件的高度可以設置為固定、不固定。 * 在充滿布局中組件的高度可以設置為充滿。 ## 5.2、幾種布局使用組件對比 | 組件 | 流式布局 | 充滿布局 | 響應式布局 | 手機界面 | | window | | class屬性增加x-full-screen | | | | row | 使用row(bootstrap)組件，不設置height | 使用row(bootstrap)組件，設置row和col的height為100% | 使用row(bootstrap)組件 | 使用row組件 | | panel | 使用panel(bootstrap)組件，不設置height | 使用panel組件，class屬性中去掉x-full，設置height為100% | | 使用panel組件 | | tabs | 使用tabs(bootstrap)組件 | 使用tabs組件 | | | | grid | height設置為auto或者固定值 | height設置為100% | | | | dataTables | | dataTables組件在panel組件的content里面，可以充滿，在col里面沒有充滿效果，因此要在col中充滿，需要先放panel組件，刪除top和bottom，再在content中放dataTables組件 | | |