Navigation Bar, Images, Pagination

Navigation Bar

Navigation Bar या Navbar, Structured और Intuitive User Interface बनाने के लिए एक महत्वपूर्ण Element है। Bootstrap एक Predefined Styles और Components के साथ इसके Implementation को सरल बनाता है।

Example:

<nav class=”navbar navbar-expand-lg navbar-light bg-light”>

<a class=”navbar-brand” href=”#”>Your Brand</a>

<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>

<span class=”navbar-toggler-icon”></span>

</button>

<div class=”collapse navbar-collapse” id=”navbarNav”>

<ul class=”navbar-nav”>

<li class=”nav-item active”>

<a class=”nav-link” href=”#”>Home <span class=”sr-only”>(current)</span></a>

</li>

<li class=”nav-item”>

<a class=”nav-link” href=”#”>Features</a>

</li>

<li class=”nav-item”>

<a class=”nav-link” href=”#”>About</a>

</li>

<!– Add more items as needed –>

</ul>

</div>

</nav>

Explanation:

• navbar: Navigation Bar के लिए Main Container होता है।
• navbar-brand: Brand/Logo Section।
• navbar-toggler: छोटी Screen पर Navigation Link को Toggle करने का Button होता है।
• navbar-nav: Navigation Link के लिए Container होता है।
• nav-item: Individual Navigation Item होता है।
• nav-link: Navigation Link के लिए Styling होता है।

Images

Bootstrap Effortless Image Handling करने के लिए Utility Class और Components Provide करता है, जिससे सभी Device में एक Consistent और Responsive Design सुनिश्चित होता है।

Example:

<!– Responsive Image –>

<img src=”your-image.jpg” class=”img-fluid” alt=”Responsive Image”>
<!– Rounded Image –>

<img src=”your-image.jpg” class=”rounded” alt=”Rounded Image”>
<!– Circle Image –>

<img src=”your-image.jpg” class=”rounded-circle” alt=”Circle Image”>
<!– Thumbnail Image –>

<img src=”your-image.jpg” class=”img-thumbnail” alt=”Thumbnail Image”>

Explanation:

• img-fluid: Image को उसके Container के भीतर Responsive बनाता है।
• rounded: Image के Corner को Round करता है।
• rounded-circle: एक Circular Image बनाता है।
• img-thumbnail: Thumbnail Effect के लिए Image में Border और Padding जोड़ता है।

Pagination

Content को Manageable Section में Divide करने तथा बड़े Dataset के साथ काम करते समय User Experience को बेहतर बनाने के लिए Pagination महत्वपूर्ण भूमिका निभाता है।

Example:

<ul class=”pagination”>

<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>

<li class=”page-item”><a class=”page-link” href=”#”>2</a></li>

<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>

<li class=”page-item”>

<a class=”page-link” href=”#” aria-label=”Next”>

<span aria-hidden=”true”>&raquo;</span>

</a>

</li>

</ul>

Explanation:

• pagination: Pagination के लिए Container होता है।
• page-item: प्रत्येक Pagination Item को Represent करता है।
• page-link: Pagination Link के लिए Styling Defined होता है।
• aria-label: Accessibility Information Provide करता है।
• « and »: Previous और Next Arrows के लिए Unicode Character है।

Jumbotron

Bootstrap में Jumbotron Component को बड़े, प्रमुख Heading के साथ Key Content प्रदर्शित करने के लिए Design किया गया है। यह Website पर Key Information या Call to Action को Highlighting करने के लिए Ideal Element होता है।

Example:

<div class=”jumbotron”>

<h1 class=”display-4″>Welcome to Our Website!</h1>

<p class=”lead”>Discover the latest trends and innovations in web development.</p>

<hr class=”my-4″>

<p>Subscribe to stay updated with our exciting content.</p>

<a class=”btn btn-primary btn-lg” href=”#” role=”button”>Subscribe</a>

</div>

Alerts

Bootstrap User को Alert, Notifications या Feedback Display करने का एक Flexible और आकर्षक तरीका Provide करता है। Alert विभिन्न Styles में आते हैं, जैसे Success, Info, Warning और Danger।

Example:

<div class=”alert alert-success” role=”alert”>

Success! Your changes have been saved.

</div>
<div class=”alert alert-warning” role=”alert”>

Warning! This action may have unintended consequences.

</div>
<div class=”alert alert-danger” role=”alert”>

Error! Something went wrong. Please try again.

</div>

Forms

Bootstrap Stylish और Responsive Forms Creation को सरल बनाता है, जिससे Developers के लिए User-Friendly Input Fields, Button और अन्य Form Elements बनाना आसान हो जाता है।

Example:

<form>

<div class=”form-group”>

<label for=”exampleFormControlInput1″>Email address</label>

<input type=”email” class=”form-control” id=”exampleFormControlInput1″ placeholder=”name@example.com”>

</div>

<div class=”form-group”>

<label for=”exampleFormControlSelect1″>Select a category</label>

<select class=”form-control” id=”exampleFormControlSelect1″>

<option>Web Development</option>

<option>Data Science</option>

<option>Design</option>

<option>Other</option>

</select>

</div>

<div class=”form-group”>

<label for=”exampleFormControlTextarea1″>Your Message</label>

<textarea class=”form-control” id=”exampleFormControlTextarea1″ rows=”3″></textarea>

</div>

<button type=”submit” class=”btn btn-primary”>Submit</button>

</form>

Progress Bars

Progress Bar किसी Ongoing Process या Task का Status को Indicate करने के लिए महत्वपूर्ण हैं। Bootstrap विभिन्न Styles और Animation के साथ Progress Bar को Include करने का एक आसान Way Provide करता है।

Example:

<div class=”progress”>

<div class=”progress-bar” role=”progressbar” style=”width: 25%;” aria-valuenow=”25″ aria-valuemin=”0″ aria-valuemax=”100″></div>

</div>
<div class=”progress”>

<div class=”progress-bar bg-success” role=”progressbar” style=”width: 75%;” aria-valuenow=”75″ aria-valuemin=”0″ aria-valuemax=”100″></div>

</div>
<div class=”progress”>

<div class=”progress-bar bg-danger progress-bar-striped progress-bar-animated” role=”progressbar” style=”width: 50%;” aria-valuenow=”50″ aria-valuemin=”0″ aria-valuemax=”100″></div>

</div>

Grid System

Bootstrap Grid System एक Flexible, Mobile-First Grid है, जो Viewport या Device का Size Increase करने पर 12 Column तक बढ़ जाता है। यह विभिन्न Screen Size में Content को Consistent Alignment और Distribution सुनिश्चित करता है, जिससे Web Applications Responsive और User-Friendly बन जाते हैं।

Example:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>

<title>Bootstrap Grid Example</title>

</head>

<body>
<div class=”container”>

<div class=”row”>

<div class=”col-md-6″>

<!– Content for the first column –>

<p>This is the first column.</p>

</div>

<div class=”col-md-6″>

<!– Content for the second column –>

<p>This is the second column.</p>

</div>

</div>

</div>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>

<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>

</html>

Explanation:

इस Example में, Container Class एक Responsive Fixed-Width Container बनाता है, और row Class में Column होते हैं। col-md-6 Class को Indicate करता है, कि प्रत्येक Column को Medium-Size और Larger Screen पर Available 12 Column में से 6 को लेना चाहिए।