Bootstrap4-text
提供：Dev Guides
ブートストラップ4-テキスト
説明
Bootstrapは、テキストの配置、変換、重みなどを制御するテキストユーティリティを提供します。
テキストの配置
テキストは_.text-justify_クラスを使用して正当化でき、テキストの左揃え、右揃え、中央揃えには、それぞれ_text-left 、 text-right 、 text-center_クラスを使用します。
次の例は、テキスト配置ユーティリティの使用方法を示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
<style type = "text/css"></style>
</head>
<body>
<div class = "container">
<h2>Text alignment: Text Justify </h2>
<p class = "text-success">
The below text is justified by using the class "text-justify"
</p>
<p class = "text-justify">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2>Text alignment: Left, Right, Center </h2>
<p class = "text-left">Text is aligned on Left side by using class "text-left"</p>
<p class = "text-center">Text is aligned at Center by using class "text-center"</p>
<p class = "text-right">Text is aligned on Right side by using class "text-right"</p>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
テキスト変換
次の例に示すように、テキスト大文字化クラスを使用してテキストを変換できます-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
<style type = "text/css"></style>
</head>
<body>
<div class = "container">
<h2>Text Transform</h2>
<p>Welcome to
<span class = "text-lowercase">finddevguides (text-lowercase)</span>.
</p>
<p>Welcome to
<span class = "text-uppercase">finddevguides (text-uppercase)</span>
</p>
<p>Welcome to
<span class = "text-capitalize">tutorials-point (text-capitalize)</span>
</p>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity =" sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
フォントの太さ、斜体、固定幅
_font-weight-* _クラスを使用してテキストのフォントの太さを変更し、_font-italic_クラスを使用してテキストを斜体にすることができます。 _monospace_フォントは固定幅のテキストを作成しますが、これは同じ量の水平スペースを取ります。
次の例は、上記のユーティリティの使用方法を示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
<style type = "text/css"></style>
</head>
<body>
<div class = "container">
<h2>Font weight and italics</h2>
<p>
This text is <span class = "font-weight-bold">font-weight-bold </span>
</p>
<p>
This text is <span class = "font-weight-normal">font-weight-normal</span>
</p>
<p>
This text is <span class = "font-weight-light">font-weight-light</span>
</p>
<p>
This text is <span class = "font-italic">font-italic</span>
</p>
<h2>Monospace</h2>
<p class = "text-monospace">
This text is written by using 'text-monospace' class
</p>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
