பூட்ஸ்ட்ராப் ஆனது அதன் எலெமெண்டுகளை கண்டைன் செய்ய ஒரு
கண்டைனெர் தேவைப்படுகின்றது.கண்டைனர்ஸ் ஆனது ரோ எலெமெண்டுகளை கொண்டுள்ளது ரோ
எலெமெண்ட் ஆனது காலம்ன்களை கொண்டுள்ளது.
Container கிளாஸ் ஆனது ஒரு பாக்ஸில் நமக்கு கண்டெண்டை
உருவாக்க பயன்படுகின்றது.
பூட்ஸ்ட்ராப்பிள் இரண்டு கண்டைனர் கிளாஸ்கள் உள்ளன.
1.
container
2.
container-fluid
கண்டைனர்
பேசிக் லே அவுட்.
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-xx"></div>
...
</div>
<div class="row">
<div class="col-md-xx"></div>
...
</div>
</div>
</body>
</html>
Bootstrap container உதாரணம்
<!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>
<div class="container">
<h1>Container</h1>
<p>container content</p>
</div>
<div class="container-fluid">
<h1>Container-fluid</h1>
<p>container-fluid content</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap Jumbotron
பூட்ஸ்ட்ராப் ஜம்போட்ரான் ஆனது ஒரு பெரிய பாக்ஸில் கவனத்தை கவரும் வகையில் கண்டண்ட் அல்லது தகவல்களை கொண்டு வர உதவுகின்றது.
இது ஒரு சாம்பல் வண்ணத்தில் ரவுண்டட் கார்னர்கள் கொண்ட பாக்ஸ் ஆக தோற்றமளிக்கின்றது. இதனால் இதன் உள்ளே உள்ள டெக்ஸ்டின் ஃபாண்ட் அளவை மாற்றியமத்துக் கொள்ளலாம்.
உங்களால் ஜம்போட்ரானின் உட் புறம் எந்த HTML அல்லது பூட்ஸ்ட்ராப் கண்டண்டையும் கொண்டு வரலாம்.
Jumbotron கிளாஸ் ஆனது டிவ் எலிமெண்டுக்கு ஆட்ரிபியூட் ஆக குறிப்பிடப்படுகின்றது.
கண்டைனரின் உட்புறம் ஜம்போட்ரான் அமைக்கப்படும் பொழுது அது அந்த ஸ்கிரீன் முனைகளை தாண்டி செல்லாது.
சான்று நிரல்
<!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/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>This is Jumbotron inside container!</h1>
<p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Jumbotron Outside Container.
ஜம்போட்ரான்
ஆனது கண்டைனரின் வெளிப்புறம் குறிப்பிடப்படும் பொழுது அதன் ஸ்கிரீன் முனைகளை எக்ஸ்டெண்ட்
செய்கின்றது.
Example:
<!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/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron">
<h1>This is Jumbotron outside container!</h1>
<p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Full-width Jumbotron
ஜம்போட்ரானர்களை
ரவுண்டட் கார்னர் அற்று அமைக்க jumbo-fluid கிளாஸ் பயன்படுகின்றது. இது container அல்லது
container-fluid கிளாஸ்களை உட்புறம் கொண்டுள்ளது
சான்று நிரல்
<!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="jumbotron jumbotron-fluid">
<div class="container">
<h1>Full-width Jumbotron</h1>
<p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
நன்றி
முத்து கார்த்திகேயன்,மதுரை.
contact 91 96293 29142
No comments:
Post a Comment