Scribd
Upload
7 views2 pages

Bootstrap Interface Design Exercise

This document provides instructions for building a new evaluation form interface using the Bootstrap framework, dividing it into 4 sections (File Import, General Information, Professional Evaluation, and Conclusion) in 4 separate HTML files and joining them in tabs.

Translated by

ScribdTranslations
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views2 pages

Bootstrap Interface Design Exercise

This document provides instructions for building a new evaluation form interface using the Bootstrap framework, dividing it into 4 sections (File Import, General Information, Professional Evaluation, and Conclusion) in 4 separate HTML files and joining them in tabs.

Translated by

ScribdTranslations
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Practical exercise in HTML CSS Bootstrap

This is the old graphical interface of the evaluation form:


Build a new interface using the Bootstrap framework. This new interface should be divided into 4 sections:

Importação de arquivo, Informações Gerais, Avaliação do Profissional e Conclusão.

1 - Build the 4 tabs of the features on a homepage (see the example in the code below).

2 - Separate these four sections into 4 different files within the project.

3 - Combine all files in each section of a tab.

For assistance with the exercise, use the Bootstrap documentation:[Link]

<ul class="nav nav-tabs" role="tablist">


<li role="presentation" class="active">
Step 1
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation">
<a href="#passo2" data-toggle="tab" aria-controls="passo2" role="tab" title="Step 2">
<span class="round-tab">
<iclass="glyphicon glyphicon-tags"></i>
</span>
</a>
</li>
</ul>

<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="passo1">
Tab1
</div>
<div class="tab-pane" role="tabpanel" id="passo2">
Tab2
</div>

</div>

You might also like