最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
8.6.1. Button group ¶
Foundation can create a series of buttons on the same line.
Can be used Vertical button group use Used in button groups num Is the number of buttons in the button group, from 1 to 8: The drop-down menu button allows the user to select a set value: Use with id The value needs to match the contents of the drop-down menu (id01). In Finally, initialize the Foundation JS. We can also create a drop-down menu of split buttons. Just add it to the button Element and add
.button-group Class to create a button group: Example ¶
<ul class="button-group"> <li><button type="button" class="button">Applebutton>li> <li><button type="button" class="button">Samsungbutton>li> <li><button type="button" class="button">Sonybutton>li> ul>
8.6.2. Vertical button group ¶
.stack Class to create. Note that the button spans the entire width of the parent element: Example ¶
<ul class="button-group stack"> <li><button type="button" class="button">Applebutton>li> <li><button type="button" class="button">Samsungbutton>li> <li><button type="button" class="button">Sonybutton>li> ul>
.stack-for-small Class is used for small screens, where buttons are arranged horizontally to vertically: Example ¶
<ul class="button-group stack-for-small"> <li><button type="button" class="button">Applebutton>li> <li><button type="button" class="button">Samsungbutton>li> <li><button type="button" class="button">Sonybutton>li> ul>
8.6.3. Fillet button group ¶
.radius And .round Class to add a fillet effect to the button: Example ¶
<ul class="button-group radius"> <li><button type="button" class="button">Applebutton>li> <li><button type="button" class="button">Samsungbutton>li> <li><button type="button" class="button">Sonybutton>li> ul> <ul class="button-group round"> <li><button type="button" class="button">Applebutton>li> <li><button type="button" class="button">Samsungbutton>li> <li><button type="button" class="button">Sonybutton>li> ul>
8.6.4. Uniformly extended button set ¶
.even-num Class is used to evenly distribute the width of the button in the button group and span the 100% width of the parent element. Example ¶
<ul class="button-group even-3"> <li><button type="button" class="button">Applebutton>li> <li><button type="button" class="button">Samsungbutton>li> <li><button type="button" class="button">Sonybutton>li> ul> <ul class="button-group even-5"> <li><button type="button" class="button">Applebutton>li> <li><button type="button" class="button">Samsungbutton>li> <li><button type="button" class="button">Sonybutton>li> <li><button type="button" class="button">HTCbutton>li> <li><button type="button" class="button">Huaweibutton>li> ul> <ul class="button-group even-8"> <li><button type="button" class="button">Abutton>li> <li><button type="button" class="button">Bbutton>li> <li><button type="button" class="button">Cbutton>li> <li><button type="button" class="button">Dbutton>li> <li><button type="button" class="button">Ebutton>li> <li><button type="button" class="button">Fbutton>li> <li><button type="button" class="button">Gbutton>li> <li><button type="button" class="button">Hbutton>li> ul>
8.6.5. Drop-down menu button ¶
Example ¶
8.6.6. Case analysis ¶
.dropdown Class to create a drop-down menu button. data-dropdown="id" Property to open the drop-down menu. Add in
.f-dropdown Class and data-dropdown-content Property to create the contents of the drop-down menu. 8.6.7. Split button ¶
.split Class and use the span element to generate a button for the direction arrow: Example ¶