Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 56... Línea 56...
56 
<button type="button" class="btn btn-outline-secondary">Primary Button</button>
 56 
<button type="button" class="btn btn-outline-secondary">Primary Button</button>
57 
{{< /example >}}
 57 
{{< /example >}}
Línea 58... Línea 58...
58 
 
 58 
 
Línea -... Línea 59...
- 
 
 59 
Outline buttons are used for buttons that controll part of the user interface, like filters on a table or the display type on the user dashboard. Outline buttons look more subtle than secondary buttons and do not distract the user from the main user interface too much.
- 
 
 60 
 
- 
 
 61 
### Subtle buttons
- 
 
 62 
 
- 
 
 63 
{{< example >}}
- 
 
 64 
<button type="button" class="btn btn-subtle-secondary">Subtle Secondary</button>
- 
 
 65 
<button type="button" class="btn btn-subtle-success">Subtle Succcess</button>
- 
 
 66 
<button type="button" class="btn btn-sm btn-subtle-success">Subtle Succcess Small</button>
- 
 
 67 
{{< /example >}}
- 
 
 68 
 
- 
 
 69 
The subtle class is designed to create buttons that offer a balance between the visual prominence of standard buttons and the minimalism of outline buttons. This class aims to provide a softer, more understated appearance compared to regular buttons while still maintaining more visual presence than outline buttons.
- 
 
 70 
 
- 
 
 71 
### Icon buttons
- 
 
 72 
 
- 
 
 73 
{{< example >}}
- 
 
 74 
<button type="button" class="btn btn-icon">
- 
 
 75 
    <i class="icon fa fa-ellipsis-vertical fa-fw" title="Edit" role="img"></i>
- 
 
 76 
</button>
- 
 
 77 
<button type="button" class="btn btn-icon text-bg-danger">
- 
 
 78 
    <i class="icon fa fa-trash-can fa-fw" title="Delete" role="img"></i>
- 
 
 79 
</button>
- 
 
 80 
<button type="button" class="btn btn-icon icon-size-4">
- 
 
 81 
    <i class="icon fa fa-user fa-fw" title="User" role="img"></i>
- 
 
 82 
</button>
- 
 
 83 
<button type="button" class="btn btn-icon icon-size-5">
- 
 
 84 
    <i class="icon fa fa-user fa-fw" title="User" role="img"></i>
- 
 
 85 
</button>
- 
 
 86 
{{< /example >}}
- 
 
 87 
 
- 
 
 88 
The `.btn-icon` class styles buttons that contain only an icon, providing a visually appealing and compact design for icon-only buttons. This class is ideal for creating minimalistic, icon-based interactions within your UI.
- 
 
 89 
 
59 
Outline buttons are used for buttons that controll part of the user interface, like filters on a table or the display type on the user dashboard. Outline buttons look more subtle than secondary buttons and do not distract the user from the main user interface too much.
 90 
The `.btn-icon` class standardizes icon button styles using the `$btn-icon-border-radius` variable in variables.scss. While this ensures consistency, the `.rounded-circle` Bootstrap class can still be used for legacy support, though it's discouraged for new designs.
Línea 60... Línea 91...
60 
 
 91 
 
Línea 61... Línea 92...
61 
## Adding buttons to a page
 92 
## Adding buttons to a page
Línea 100... Línea 131...
100 
    <div class="col-5">
 131 
    <div class="col-5">
101 
        <div class="card mb-2">
 132 
        <div class="card mb-2">
102 
            <div class="card-body">
 133 
            <div class="card-body">
103 
                <strong>Save Changes?</strong>
 134 
                <strong>Save Changes?</strong>
104 
                <div class="d-flex">
 135 
                <div class="d-flex">
105 
                    <button type="button" class="btn btn-secondary mr-1">Cancel</button>
 136 
                    <button type="button" class="btn btn-secondary me-1">Cancel</button>
106 
                    <button type="button" class="btn btn-primary mr-1">Save</button>
 137 
                    <button type="button" class="btn btn-primary me-1">Save</button>
107 
                </div>
 138 
                </div>
108 
            </div>
 139 
            </div>
109 
        </div>
 140 
        </div>
110 
    </div>
 141 
    </div>
111 
    <div class="col-5">
 142 
    <div class="col-5">
112 
        <div class="card mb-2">
 143 
        <div class="card mb-2">
113 
            <div class="card-body">
 144 
            <div class="card-body">
114 
                <strong>Delete profile</strong>
 145 
                <strong>Delete profile</strong>
115 
                <div class="d-flex">
 146 
                <div class="d-flex">
116 
                    <button type="button" class="btn btn-primary mr-1">Cancel</button>
 147 
                    <button type="button" class="btn btn-primary me-1">Cancel</button>
117 
                    <button type="button" class="btn btn-secondary">Delete</button>
 148 
                    <button type="button" class="btn btn-secondary">Delete</button>
118 
                </div>
 149 
                </div>
119 
            </div>
 150 
            </div>
120 
        </div>
 151 
        </div>
121 
    </div>
 152 
    </div>
Línea 141... Línea 172...
141 
        <div class="card mb-2">
 172 
        <div class="card mb-2">
142 
            <div class="card-body">
 173 
            <div class="card-body">
143 
                <strong>Save Changes?</strong>
 174 
                <strong>Save Changes?</strong>
144 
                <p>Would you like to not save your changes before exiting?</p>
 175 
                <p>Would you like to not save your changes before exiting?</p>
145 
                <div class="d-flex">
 176 
                <div class="d-flex">
146 
                    <button type="button" class="btn btn-primary mr-1">Yes</button>
 177 
                    <button type="button" class="btn btn-primary me-1">Yes</button>
147 
                    <button type="button" class="btn btn-secondary">No</button>
 178 
                    <button type="button" class="btn btn-secondary">No</button>
148 
                </div>
 179 
                </div>
149 
            </div>
 180 
            </div>
150 
        </div>
 181 
        </div>
151 
        <div class="alert alert-warning">Avoid generic 'OK' or 'Yes', avoid confusing phrases</div>
 182 
        <div class="alert alert-warning">Avoid generic 'OK' or 'Yes', avoid confusing phrases</div>
Línea 154... Línea 185...
154 
        <div class="card mb-2">
 185 
        <div class="card mb-2">
155 
            <div class="card-body">
 186 
            <div class="card-body">
156 
                <strong>Save Changes</strong>
 187 
                <strong>Save Changes</strong>
157 
                <p>Would you like to save your changes before exiting?</p>
 188 
                <p>Would you like to save your changes before exiting?</p>
158 
                <div class="d-flex">
 189 
                <div class="d-flex">
159 
                    <button type="button" class="btn btn-primary mr-1">Save</button>
 190 
                    <button type="button" class="btn btn-primary me-1">Save</button>
160 
                    <button type="button" class="btn btn-secondary">Discard</button>
 191 
                    <button type="button" class="btn btn-secondary">Discard</button>
161 
                </div>
 192 
                </div>
162 
            </div>
 193 
            </div>
163 
        </div>
 194 
        </div>
164 
        <div class="alert alert-success">Avoid generic 'OK' or 'Yes', avoid confusing phrases</div>
 195 
        <div class="alert alert-success">Avoid generic 'OK' or 'Yes', avoid confusing phrases</div>