最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
使用网格的列来设置输入框的大小，如 .large-6 , .medium-6 , 等。
For more knowledge of grid systems, please click 网格系统 Tutorials. The following shows an example of an equal size column: If you want your tag content to be displayed on the left (not above), you can place the tag element label on a different column on the left side of the input box and use the You can do it in the Can be used 8.24.1. Example ¶
<form> <div class="row"> <div class="large-10 medium-7 columns"> <label>large-10 medium-7 (100% on small) <input type="text" placeholder="Name"> label> div> div> <div class="row"> <div class="small-5 columns"> <label>small-5 <input type="text" placeholder="Name"> label> div> div> <div class="row"> <div class="medium-3 columns"> <label>medium-3 (100% on small) <input type="text" placeholder="Name"> label> div> div> form>
Equal size column ¶
8.24.2. Example ¶
<form> <div class="row"> <div class="medium-4 columns"> <label>medium-4 (100% on small, stacked) <input type="text" placeholder="Name"> label> div> <div class="medium-4 columns"> <label>medium-4 (100% on small, stacked) <input type="text" placeholder="Name"> label> div> <div class="medium-4 columns"> <label>medium-4 (100% on small, stacked) <input type="text" placeholder="Name"> label> div> div> form>
Inline label ¶
.inline Class to set vertical centering 8.24.3. Example ¶
<form> <div class="row"> <div class="small-8"> <div class="row"> <div class="small-3 columns"> <label for="name" class="inline right">Namelabel> div> <div class="small-9 columns"> <input type="text" id="name" placeholder="First Name.."> div> div> div> div> form>
Front and back label ¶
class="row collapse"> Add pre-and post-tags in the following elements: 8.24.4. Example ¶
<form> <div class="row"> <div class="large-6 columns"> <div class="row collapse prefix-radius"> <div class="small-3 columns"> <span class="prefix">Prefixspan> div> <div class="small-9 columns"> <input type="text" placeholder="Value"> div> div> div> <div class="large-6 columns"> <div class="row collapse postfix-radius"> <div class="small-9 columns"> <input type="text" placeholder="Value"> div> <div class="small-3 columns"> <span class="postfix">Postfixspan> div> div> div> div> form>
Front and rear label buttons ¶
Element addition .button Class to set the front and rear buttons: 8.24.5. Example ¶
<a href="#" class="postfix button">Goa>
Front and rear label fillet buttons ¶
8.24.6. Example ¶
<form> <div class="row"> <div class="large-6 columns"> <div class="row collapse prefix-radius"> <div class="small-3 columns"> <span class="prefix">Prefixspan> div> <div class="small-9 columns"> <input type="text" placeholder="Value"> div> div> div> <div class="large-6 columns"> <div class="row collapse postfix-radius"> <div class="small-9 columns"> <input type="text" placeholder="Value"> div> <div class="small-3 columns"> <span class="postfix">Postfixspan> div> div> div> div> <div class="row"> <div class="large-6 columns"> <div class="row collapse prefix-round"> <div class="small-3 columns"> <a href="#" class="button prefix">Goa> div> <div class="small-9 columns"> <input type="text" placeholder="Value"> div> div> div> <div class="large-6 columns"> <div class="row collapse postfix-round"> <div class="small-9 columns"> <input type="text" placeholder="Value"> div> <div class="small-3 columns"> <a href="#" class="button postfix">Goa> div> div> div> div> form>