web

Color Management, Buttons, Table, Drop-down

by
with no comment
Contents hide
1 Color Management
2 Bootstrap Buttons
2.1 Default Buttons
2.2 Primary Buttons
2.3 Success Buttons
2.4 Warning Buttons
2.5 Danger Buttons
2.6 Customizing Bootstrap Buttons
3 Creating a Table in Bootstrap
4 Introduction of Dropdown

Color Management

Color Management, Web Developement का एक महत्वपूर्ण Aspect है, जो Direct User Experience को प्रभावित करता है। Bootstrap, एक Popular Front-End Framework है, जोकि Attractive Design और Responsive User Interface Design करने के लिए Tools का एक Robust Set Provide करता है।

Web Developement में Color को आमतौर पर Hexadecimal Values, RGB (Red, Green, Blue) Values या Color Name का use करके Define किया जाता है। एक Harmonious Color Scheme Select करने से Website की Readability, Usability, और Overall Aesthetic में वृद्धि होती है।

Example – Implementing Color Palette in CSS



/* Define a color palette using variables */

:root {

–primary-color: #3498db;

–secondary-color: #2ecc71;

–accent-color: #e74c3c;

}


/* Apply colors to specific elements */

body {

background-color: var(–secondary-color);

color: var(–primary-color);

}


.header {

background-color: var(–primary-color);

color: white;

}


.button {

background-color: var(–accent-color);

color: white;

}

उपरोक्त Example में Primary, Secondary और Accent Colors के लिए CSS Variables का use करके एक Color Palette Define किया है। फिर इन Variables को Specific Element, जैसे Body, Header और Button पर Apply किया जाता है, जिससे एक Cohesive और Visually रूप से आकर्षक Design बनता है।

Bootstrap Buttons

Bootstrap Button Style का एक Versatile Set Provide करता है, जिसे आपके Application की आवश्यकताओं के अनुरूप आसानी से Customized किया जा सकता है।

  • Default Buttons



<button type=”button” class=”btn btn-default”>Default Button</button>

  • Primary Buttons



<button type=”button” class=”btn btn-primary”>Primary Button</button>

  • Success Buttons



<button type=”button” class=”btn btn-success”>Success Button</button>

  • Warning Buttons



<button type=”button” class=”btn btn-warning”>Warning Button</button>

  • Danger Buttons



<button type=”button” class=”btn btn-danger”>Danger Button</button>

  • Customizing Bootstrap Buttons

विभिन्न Class और Style को मिलाकर Bootstrap Button को और अधिक Customized किया जा सकता है। Example के लिए, btn-lg class जोड़ने से एक Larger Button बनता है, और btn-outline-secondary एक Button को Secondary Outline देता है|



<button type=”button” class=”btn btn-lg btn-outline-secondary”>Large Secondary Button</button>

Creating a Table in Bootstrap

Data को Organize करने और Present करने के लिए Table Fundamental Element हैं। Bootstrap Table को Design करने का एक Clean और Responsive Way Provide करता है। एक Basic Table बनाने के लिए इन Step को Follow करें|

Step 1: Include Bootstrap CSS and JS Files

सुनिश्चित करें कि आपने अपने HTML Document के <head> Section में Bootstrap CSS और JS File Include की हैं। जिसके लिए आप निम्नलिखित CDN Link का use कर सकते हैं|



<!– Bootstrap CSS –>

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css”>


<!– Bootstrap JS and Popper.js –>

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js”></script>

Step 2: Create the HTML Table

Basic Styling के लिए Table और table-striped class के साथ Table Class का use करें।

Example:



<table class=”table table-striped”>

<thead>

<tr>

<th scope=”col”>ID</th>

<th scope=”col”>Name</th>

<th scope=”col”>Age</th>

</tr>

</thead>

<tbody>

<tr>

<th scope=”row”>1</th>

<td>John Doe</td>

<td>25</td>

</tr>

<tr>

<th scope=”row”>2</th>

<td>Jane Smith</td>

<td>30</td>

</tr>

<!– Add more rows as needed –>

</tbody>

</table>

Step 3: Customize as Needed

Additional Class Add करके Table को Customize करें, जैसे Border के लिए table-border या Hover Effect के लिए table-hover।

Introduction of Dropdown

Bootstrap, एक Front-End Framework है, जो Web Development को सुव्यवस्थित करने के लिए Components का एक Versatile Set Provide करता है। ऐसा ही एक Essential Component है- Dropdown। Dropdown Interactive Element हैं, जो User को List से एक Option Select करने की Permission देते हैं।

Syntax:

Bootstrap में Dropdown बनाने के लिए Basic Syntax में Dropdwon Class के साथ <div> Element का use शामिल है। इसके अतिरिक्त, आपको Dropdown को Trigger करने के लिए dropdown-toggle Class के साथ एक Button या Anchor Tag की आवश्यकता होती है, और Dropdown Item को Implement करने के लिए dropdown-menu Class के साथ एक <div> की आवश्यकता होती है।

Example:



<div class=”dropdown”>

<button class=”btn btn-secondary dropdown-toggle” type=”button” id=”dropdownMenuButton” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>

Select an Option

</button>

<div class=”dropdown-menu” aria-labelledby=”dropdownMenuButton”>

<a class=”dropdown-item” href=”#”>Option 1</a>

<a class=”dropdown-item” href=”#”>Option 2</a>

<a class=”dropdown-item” href=”#”>Option 3</a>

</div>

</div>

Explanation:

  • dropdown Class को Bootstrap Dropdown के रूप में Define करने के लिए Main <div> पर Apply किया जाता है।
  • btn btn-secondary dropdown toggle class उस Button को Style करते हैं, जो Dropdown को Trigger करता है।
  • Dropdown Functionality को Implement करने के लिए data-toggle = “Dropdown” Attribute महत्वपूर्ण है।
  • dropdown -menu class का use Dropdown Item के Container को Style करने के लिए किया जाता है।
  • प्रत्येक Dropdown Item को Dropdown Item Class के साथ एक Anchor Tag द्वारा दर्शाया जाता है।
Post Views: 428
Tags: No tags

Add a Comment

Your email address will not be published. Required fields are marked *