டிஃபால்ட்
ஆக பூட்ஸ்ராப் ஃப்ஃபாண்ட் அளவு 14 px ஆகும் அதன் லைன் உயரம்-1.428 ஆகும்.
இது எல்லா
பாடி எலிமெண்ட். பாராகிராப் எலிமெண்டுகளுக்கு அப்ளை செய்யப்படுகின்றது.
இந்த கட்டுரையில்
html எலிமெண்ட்ஸ் பூட்ஸ்ட்ராப் உதவி கொண்டு சற்று வித்தியாசமாக எவ்வாறு டிசைன் செய்யப்படுகின்றது
என்று பார்ப்போம்.
H1 TO H6
இந்த ஹெட்டிங்க்
டேக்குகள் பூட்ஸ்ராப்பில் எவ்வாறு காட்சியகின்றன
என்று பார்ப்போம்.
<!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.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div
class="container">
<h1>h1 Bootstrap heading
(36px)</h1>
<h2>h2 Bootstrap heading
(30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading
(18px)</h4>
<h5>h5 Bootstrap heading
(14px)</h5>
<h6>h6 Bootstrap heading
(12px)</h6>
</div>
</body>
</html>
வெளியீடு
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
<small>
இந்த டேக்
ஆனது எல்லா ஹெடிங்க் டேக்குகளிலும் அதன் செகண்டரி டெக்ஸ்ட் ஆக தோன்றுகின்றது.
சான்று
நிரல்.
<!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.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div
class="container">
<h1>Lighter, Secondary Text</h1>
<p>The small element is used to create
a lighter, secondary text in any heading:</p>
<h1>h1 heading <small>secondary
text</small></h1>
<h2>h2 heading <small>secondary
text</small></h2>
<h3>h3 heading <small>secondary
text</small></h3>
<h4>h4 heading <small>secondary
text</small></h4>
<h5>h5 heading <small>secondary
text</small></h5>
<h6>h6 heading <small>secondary
text</small></h6>
</div>
</body>
</html>
வெளியீடு:
Lighter, Secondary Text
The small element is used to create a lighter, secondary
text in any heading:
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<mark>
இந்த டேக்கு ஆனது டெக்ஸ்டை ஹைலைட் செய்யப் பய்ன்படுகின்றது
சான்று
நிரல்.
<!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.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div
class="container">
<h1>Highlight Text</h1>
<p>Use the mark element to
<mark>highlight</mark> text.</p>
</div>
</body>
</html>
வெளியீடு:
Highlight Text
Use the mark element to highlight text.<abbr>
பூட்ஸ்ராப்பில் abbr டேக்கு ஆனது பின் வரும் வழியில் பயன்படுகின்றது,
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
</body>
</html>
வெளியீடு:
Abbreviations
The abbr element is used to mark up an abbreviation or acronym:The WHO was founded in 1948.
<blockquote>
பூட்ஸ்ராப் ஆனது html blockquote எலிமெண்டை கீழ் வரும் வகையில் காட்சிப்படுத்துகின்றது.
சான்று நிரல்.
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote>
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
</div>
</body>
</html>
வெளியீடு:
Blockquotes
The blockquote element is used to present content from
another source:
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization, WWF works in 100 countries and
is supported by 1.2 million members in the United States and close to 5 million
globally.
From WWF's
website
இதை வலதுபுறம் காண்பிக்க .blockquote reverse
கிளாஸ் பயன்படுகின்றது.<div class="container">
<h1>Blockquotes</h1>
<p>To show the quote on the right use the class .blockquote-reverse:</p>
<blockquote class="blockquote-reverse">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
</div>
வெளியீடு:
Blockquotes
To show the quote on the right use the class
.blockquote-reverse:
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization, WWF works in 100 countries and
is supported by 1.2 million members in the United States and close to 5 million
globally.
From WWF's website
<dl>
பூட்ஸ்ராப் ஆனது
dl எலிமெண்டை கீழ் வருமாறு காட்சிப்படுத்துகின்றது.
சான்று நிரல்.
<div
class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a
description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
வெளியீடு:
Description Lists
The dl element indicates a description list:
Coffee
- black hot drink
Milk
- white cold drink
<code>
பூட்ஸ்ராப்
ஆனது code எலிமெண்டை கீழ்வரும் வகையில் காட்சிப்படுத்துகின்றது.
சான்று
நிரல்.
<div
class="container">
<h1>Code Snippets</h1>
<p>Inline snippets of code should be
embedded in the code element:</p>
<p>The following HTML elements:
<code>span</code>, <code>section</code>, and
<code>div</code> defines a section in a document.</p>
</div>
வெளியீடு:
Code Snippets
Inline snippets of code should be embedded in the code element:The following HTML elements:
span, section, and div defines a section in a document.
<kbd>
பூட்ஸ்ட்ராப்
ஆனது கீழ்வரும் வகையில் kbd எலிமெண்டை காட்சிப்
படுத்துகின்றது.
சான்று
நிரல்.
<div
class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically
entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd>
to open the Print dialog box.</p>
</div>
வெளியீடு:
Keyboard Inputs
To indicate input that is typically entered via the keyboard, use the kbd element:Use ctrl + p to open the Print dialog box.
<pre>
இந்த டேக்கை பூட்ஸ்ட்ராப் எவ்வாறு பயன்படுத்துகின்றது என்று பார்போம்.
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
வெளியீடு:
Multiple Code Lines
For multiple lines of code, use the pre element:
Text
in a pre element
is
displayed in a fixed-width
font,
and it preserves
both spaces and
line
breaks.
Contextual
color and backgrounds.
பூட்ஸ்ராப்பில்
டெக்ஸ்டை பின் வரும் கிளாஸ்களை பயன்படுத்தி வித்தியாசமான நிறங்களில் தோற்றப்படுத்தலாம்.
அதற்கு
பயன்படும் கிளாஸ்கள்.
:
.text-muted, .text-primary, .text-success, .text-info, .text-warning, மற்றும் .text-danger:
சான்று
நிரல்.
<div
class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to
provide "meaning through colors":</p>
<p class="text-muted">This
text is muted.</p>
<p class="text-primary">This
text is important.</p>
<p class="text-success">This
text indicates success.</p>
<p class="text-info">This
text represents some information.</p>
<p class="text-warning">This
text represents a warning.</p>
<p class="text-danger">This
text represents danger.</p>
</div>
வெளியீடு:
Contextual Colors
Use the contextual classes to provide "meaning through colors":
This text is muted.
This text is
important.
This text
indicates success.
This text represents
some information.
This text represents
a warning.
This text
represents danger.
நன்றி.
முத்து
கார்த்திகேயன்,மதுரை
No comments:
Post a Comment