Cài đặt mặc định của Bootstrap
Theo mặc định, phong cách trang Bootstrap có một số thiết lập mặc định. Đó là thẻ <Body> có một font-size của 14px, và line-height là 1.428.Ngoài ra, tất cả thẻ <p> có một lề dưới bằng một nửa chiều cao dòng tính toán của nó (theo mặc định là 10px).
Bootstrap với trình duyệt mặc định
Trong chương này, chúng tôi sẽ xem xét một số yếu tố HTML sẽ được theo kiểu hơi khác một chút bởi Bootstrap hơn mặc định của trình duyệt.<h1> - <h6>
Theo mặc định, Bootstrap sẽ phong cách tiêu đề HTML theo cách sau:Ví dụ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>h1 Bootstrap heading-Bootstrap Typography (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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Kết quả:
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>
Trong Bootstrap các thẻ <small> sẽ tạo ra a lighter, văn bản thứ cấp vào nhóm nào:Ví dụ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>h1 heading <small>lighter, smaller text</small></h1>
<h2>h2 heading <small>lighter, smaller text</small></h2>
<h3>h3 heading <small>lighter, smaller text</small></h3>
<h4>h4 heading <small>lighter, smaller text</small></h4>
<h5>h5 heading <small>lighter, smaller text</small></h5>
<h6>h6 heading <small>lighter, smaller text</small></h6>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
h1 heading lighter, smaller text
h2 heading lighter, smaller text
h3 heading lighter, smaller text
h4 heading lighter, smaller text
h5 heading lighter, smaller text
h6 heading lighter, smaller text
<mark>
Theo mặc định, Bootstrap sẽ tạo kiểu HTML <mark> trong các cách sau:Ví dụ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p>Use the mark element to <mark>highlight</mark> text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Kết quả:
Use the mark element to highlight text.
<Abbr>
Theo mặc định, Bootstrap sẽ tạo kiểu cho phần tử HTML <abbr> theo cách sau (với một đường viền phía dưới Text và một con trỏ chuột giải thích về nội dung đó khi Hover qua.Ví dụ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p>Use the abbr element to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
The WHO was founded in 1948.
<Blockquote>
Theo mặc định, Bootstrap sẽ tạo kiểu cho phần tử HTML <blockquote> theo cách sau:Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p>Use the blockquote element 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
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.
<dl>
Theo mặc định, Bootstrap sẽ tạo kiểu HTML <dl> trong các cách sau:Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p>Use the dl element to indicate a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
- Coffee
- - black hot drink
- Milk
- - white cold drink
<Code>
Theo mặc định, Bootstrap sẽ tạo kiểu HTML <code> yếu tố trong các cách sau:Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
The following HTML elements:
span, section, and div defines a section in a document.<kbd>
Theo mặc định, Bootstrap sẽ tạo kiểu cho phần tử HTML <kbd> theo cách sau:Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Use ctrl + p to open the Print dialog box.
<Pre>
Theo mặc định, Bootstrap sẽ tạo kiểu HTML <pre> để giữ nguyên đoạn Text khi ta nhập:Ví dụ
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Lớp mở rộng Typography
Các lớp Bootstrap dưới đây có thể được thêm vào các yếu tố phong cách HTML thêm:| Class | Description | Example |
|---|---|---|
| .lead | Makes a paragraph stand out | Try it |
| .small | Indicates smaller text (set to 85% of the size of the parent) | Try it |
| .text-left | Indicates left-aligned text | Try it |
| .text-center | Indicates center-aligned text | Try it |
| .text-right | Indicates right-aligned text | Try it |
| .text-justify | Indicates justified text | Try it |
| .text-nowrap | Indicates no wrap text | Try it |
| .text-lowercase | Indicates lowercased text | Try it |
| .text-uppercase | Indicates uppercased text | Try it |
| .text-capitalize | Indicates capitalized text | Try it |
| .initialism | Displays the text inside the <abbr> element in a slightly smaller font size | Try it |
| .blockquote-reverse | Indicates a blockquote with right-aligned content | Try it |
| .list-unstyled | Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) | Try it |
| .list-inline | Places all list items on a single line | Try it |
| .dl-horizontal | Lines up the terms and descriptions in the <dl> element side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side | Try it |
| .pre-scrollable | Makes a <pre> element scrollable | Try it |
Bài viết được thiet ke web dịch lại nên câu từ sử dụng không được chính xác lắm, mong các bạn thông cảm. Mọi thắc mắc các bạn có thể comment luôn phía dưới để mọi người cùng thảo luận nhé!
0 comments:
Post a Comment