Scribd
Upload
37 views

Vowels Using Switch Statement

The document discusses different Bootstrap components including dropdowns, carousels, modals, buttons, navigation, and tabs. It provides code examples for implementing each component in Bootstrap. The code examples demonstrate how to create a basic dropdown menu, carousel, modal, set of buttons, navigation bar, and tabs component using Bootstrap classes and markup.

Uploaded by

lumiy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views

Vowels Using Switch Statement

The document discusses different Bootstrap components including dropdowns, carousels, modals, buttons, navigation, and tabs. It provides code examples for implementing each component in Bootstrap. The code examples demonstrate how to create a basic dropdown menu, carousel, modal, set of buttons, navigation bar, and tabs component using Bootstrap classes and markup.

Uploaded by

lumiy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Vowels Using Switch Statement

<? php
Echo Vowels are: . </br>
For($j=a; $j<=z; $j++)
{
Switch($j)
{
Case a;
Case e;
Case i;
Case o;
Case u

echo $j. </br>;}


}
?>

Implementation in Bootstrap

1. Dropdown

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button"


id="dropdownMenu1" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="true">

Dropdown

<span class="caret"></span>

</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">Separated link</a></li>


</ul>

</div>

2. Carousel

<div id="carouselExampleIndicators" class="carousel slide" data-


ride="carousel">

<ol class="carousel-indicators">

<li data-target="#carouselExampleIndicators" data-slide-to="0"


class="active"></li>

<li data-target="#carouselExampleIndicators" data-slide-


to="1"></li>

<li data-target="#carouselExampleIndicators" data-slide-


to="2"></li>

</ol>

<div class="carousel-inner" role="listbox">

<div class="carousel-item active">

<img class="d-block img-fluid" src="..." alt="First slide">

</div>

<div class="carousel-item">

<img class="d-block img-fluid" src="..." alt="Second slide">

</div>

<div class="carousel-item">

<img class="d-block img-fluid" src="..." alt="Third slide">

</div>

</div>
<a class="carousel-control-prev"
href="#carouselExampleIndicators" role="button" data-
slide="prev">

<span class="carousel-control-prev-icon" aria-


hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next"
href="#carouselExampleIndicators" role="button" data-
slide="next">

<span class="carousel-control-next-icon" aria-


hidden="true"></span>

<span class="sr-only">Next</span>

</a></div>

3. Modals

<!-- Button trigger modal --><button type="button" class="btn btn-


primary" data-toggle="modal" data-target="#exampleModal">

Launch demo modal</button>

<!-- Modal --><div class="modal fade" id="myModal" tabindex="-


1" role="dialog" aria-labelledby="exampleModalLabel" aria-
hidden="true">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="exampleModalLabel">Modal


title</h5>

<button type="button" class="close" data-dismiss="modal"


aria-label="Close">

<span aria-hidden="true">&times;</span>
</button>

</div>

<div class="modal-body">

...

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-


dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save


changes</button>

</div>

</div>

</div></div>

4. Buttons

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

5. Navigation
nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">Home</a>


<img alt="Brand" src="...">

</div>

</div></nav>

6. Tabs
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
>Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>

You might also like