最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
Foundation provides responsive images to create thumbnails and picture pop-up windows:
尝试一下 » In In 响应式图片 Pictures in Foundation are responsive by default. We can resize the browser on the instance page to see the image zooming effect. We can do it in Foundation can easily implement picture pop-up windows. To create a pop-up window, you can use the 注意: Picture pop-up window requires JavaScript. So you need to initialize Foundation JS before using it. Can be added 提示： You can add HTML elements to the data-caption attribute, such as data-caption= “< H2 > Pulpit Rock < / H2 > < p > Located in Norway < / p >” When you need to show only one thumbnail, you can use the 8.12.1. Thumbnail image ¶
Add outside the element
Element uses the picture as an anchor link. Add to label .th Moving the mouse over it will display a light blue frame: Example ¶
<a href="paris.jpg" class="th"> <img src="paris.jpg" alt="Paris"> a>
8.12.2. Rounded corner picture ¶
.th Class addition .radius Class to set fillet thumbnails: Example ¶
<a href="paris.jpg" class="th radius"> <img src="paris.jpg" alt="Paris"> a>
8.12.3. A simple pop-up window ¶
Add on the element
.clearing-thumbs Class and data-clearing Property. In Add a list of pictures within.
Example ¶
8.12.4. Picture text description ¶
data-caption Property to each picture to set the description of the picture: Example ¶
<ul class="clearing-thumbs" data-clearing> <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg"> <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg"> <li><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg"> ul>
8.12.5. Show only one thumbnail ¶
For use in
.clearing-feature Class and in the For use in .clearing-featured-img Class. Example ¶
<ul class="clearing-thumbs clearing-feature" data-clearing> <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg"> <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg"> <li class="clearing-featured-img"><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg">a>li> ul>