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
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. 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 ¶
Principles, Technologies, and Methods of Geographic Information Systems
102