PROGRAMMING IN TAMIL: July 2018

Thursday, July 19, 2018

பூட்ஸ்ட்ராப் பட்டன்கள்.

பூட்ஸ்ட்ராப் என்பது html,css, javascript ஆகியவற்றின் ஃப்ரேம் வொர்க் ஆகும். இது ரெஸ்பான்சிவ் மற்றும் மொபைல் ஃப்ரண்ட்லி வெப்தளங்களை உருவாக்கப்பயன்படுகின்றது. ரெஸ்பான்ஸிவ் என்றால் பார்வையிடும் சாதனங்களுக்கு ஏற்றாற் போல் அதன் நீள அகலங்களை மாற்றி அமைத்துக் கொள்ளும் தன்மையடையதாகும். இதை கட்டணம் ஏதுமின்றி இணையத்திலிருந்து பதிவிரக்கி உபயோகித்துக் கொள்ளலாம். இது ஒரு ஃப்ரண்ட் எண்ட் ஃப்ரேம்வொர்க் ஆகும். இது இணைய பக்கங்களை விரைவாக உருவாக்கப் பயன்படுகின்றது. இது html, css ஆகியவற்றின் அடிப்படையாக bடைபோகிராபி, ஃபார்ம்கள், பட்டன்கள், அட்டவனைகள்,நேவிகேசன்,மாடல்கள் போன்றவற்றிற்கான டிசைன் டெம்ப்லேட்களைக் கொண்டுள்ளது. ஜாவாஸ்கிரிப்ட் பிளக்-இன்களையும் சேர்ந்து உபயோகிக்கலாம்.

Bootstrap Buttons

பூட்ஸ்ட்ராப்பில் மொத்தம் ஏழுவகையான ஸ்டைல்கள் உள்ளன.குறிப்பிட்ட கிளாஸ்களை உபயோகிப்பதன் மூலம் விதவிதமான வண்ணத்தில் பட்டனைப் பெறலாம்.

ஏழு வகையான கிளாஸ்கள்:

.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

Bootstrap Button Example: specifying seven styles

<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<h1>Button Example!</h1>
<button class="btn btn-default">default</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-success">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-link">Link</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

பூட்ஸ்ட்ராப் 4-ல் மேலும் மூன்று வகையான பட்டன் கிளாஸ்கள் சேர்க்கப்பட்டுள்ளன.

அவையாவன:

Secondary
Dark
Light

கீழ் கண்டவாறு அவை உபயோகப் படுத்தப் பட்டு வருகின்றன.

<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>

சான்று நிரல்:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>

Bootstrap Button Size

பூட்ஸ்ட்ராப் மூலம் வெவ்வேறு அளவுகளில் பட்டனை வடிவமைக்கலாம். மொத்தம் நான்கு அளவுகள் உள்ளன.

அதற்கு கீழ் கண்ட கிளாஸ்கள் பயன்படுகின்றன:

.btn-lg
.btn-md
.btn-sm
.btn-xs

சான்று நிரல்:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Sizes</h2>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
</div>
</body>
</html>

Bootstrap Enable/Disable Buttons

குறிப்பிட்ட கிளாஸை உபயொகிப்பதன் மூலம் ஒரு பட்டனை டிசேபிள் செய்யலாம். அதாவது அந்த பட்டனை கிளிக் செய்ய இயலாது.

.active கிளாஸ் அந்த பட்டனை ப்ரஸ் செய்யப்பட்ட நிலையிலும் disabled அந்த பட்டனை கிளிக் செய்ய இயலாத வகையிலும் பயன்படுகின்றது. .

சான்று நிரல்:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button States</h2>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
</div>
</body>
</html>

Bootstrap Block level buttons

பிளாக் லெவல் பட்டன்கள் அதன் பேரண்ட் எலிமென்டின் மொத்த இடத்தையும் எடுத்துக் கொள்கின்றது

.btn-block class அதற்கு பயன்படுகின்றது.

சான்று நிரல்:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-block">Button 2</button>
<h2>Large Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>
<h2>Small Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>
</body>
</html>

Button Classes with other elements

மற்ற எலிமெண்டுகளுடன் ( <a>, <button>, or <input> element etc.)

எவ்வாறு பட்டன் கிளாஸ்களை எவ்வாறு உபயோகப் படுத்துவது என்று கீழ் கண்ட நிரல் விளக்குகின்றது.

சான்று நிரல்:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Classes with other Elements</h2>
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
</div>
</body>
</html>

Button Outline/ Bordered buttons

பூட்ஸ்ட்ராப் ஆனது எட்டு அவுட்லைன் / பார்டர் பட்டன்களை வழங்குகின்றது

சான்று நிரல்:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Outline/ Bordered Buttons</h2>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
</div>
</body>
</html>