ホームページ >ウェブフロントエンド >htmlチュートリアル >Bootstrap 入門メモ (1) Typesetting_html/css_WEB-ITnose
Bootstrap 入門メモ (1) Typesetting_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 08:59:271283ブラウズ
1. タイトル
Bootstrap でのタイトルの使用方法は通常の HTML と同じです。
1. タイトル要素を
から まで並べます。 ; ただし、デフォルトのスタイルはブートストラップでリセットされています。ソース コードから、次の共通の機能がわかります:
フォントの色とフォント スタイルは親要素から継承され、フォントの太さは 500 です。行の高さはすべて 1.1 に設定されます (フォントサイズの 1.1 倍でもあります)
{ font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;}
- には、サイズの異なるタイトルで次のような違いがあります。 : Bootstrap の
- タイトルのさまざまなレベルのフォント サイズ設定は、h1=36px、h2=30px、h3=24px、h4=18px、h5=14px、および h6=12px です。 margin-top と margin-bottom の値をリセットします。 リセット後の h1~h3 の値はすべてリセットされます。 20px; h4~h6 リセット値はすべて
です。 また、Bootstrap では、タイトル以外の要素とタイトルを 同じスタイル
にするために、.h1~.h6
も特別に指定しています。クラス名が定義されています。以下に示すように:
Bootstrap では、次のコードは同じ効果を表示します。
<!--Bootstrap中的标题--><h1>Bootstrap标题一</h1><h2>Bootstrap标题二</h2><h3>Bootstrap标题三</h3><h4>Bootstrap标题四</h4><h5>Bootstrap标题五</h5><h6>Bootstrap标题六</h6><!--Bootstrap中让非标题元素和标题使用相同的样式--><div class="h1">Bootstrap标题一</div><div class="h2">Bootstrap标题二</div><div class="h3">Bootstrap标题三</div><div class="h4">Bootstrap标题四</div><div class="h5">Bootstrap标题五</div><div class="h6">Bootstrap标题六</div>
実際のアプリケーションでは、メインタイトルに加えてサブタイトルがある状況に遭遇することがよくあります。 Bootstrap は、人間的にそのような効果を設定します。使用方法も次のように非常に簡単です。
<h1>Bootstrap标题一<small>我是副标题</small></h1>
- もちろん、この設定は 7f40f24cbc692b676d6dcb7a4a610aff には独自のスタイルがいくつかあります:
h1 ～ h3 内の d015d241ae6d34c34210679b5204fe85 タグ テキストのサイズは現在のフォント サイズの 65% に設定され、h4 ～ h6 内のフォント サイズは現在のフォント サイズの 75% に設定されます。
- 2. 本文
- Bootstrap のグローバル テキスト スタイルは次のとおりです。
- フォント サイズは 14px です
- 行の高さは 1.42867143 (約 20px)
p タグの外側に 10 ピクセルの下マージンがあります margin-bottom:10px; 🎜>
もちろん、リセットスタイルを自分で設定することもできます。 ^_^
3.
フォント スタイル関連
<p class="lead">lead</p><!-- 字体变大，行高变大，下外边距变大 --><i>i</i><!--无特殊意义， 斜体 --><small>small</small><!-- 小号字体--><strong>strong</strong><!-- 语气强烈的强调，粗体 --><em>em</em><!-- 强调，斜体 -->
関連クラスの強調 Bootstrap ではこのような一連のクラスが定義されており、テキストのほかに、背景色なども使用されます。使い方は似ていますが、前のテキストが変更されています。それで。
次の 6 つの単語を覚えてください
<p class="text-muted">提示，使用浅灰色（#999）</p><p class="text-primary">主要，使用蓝色（#428bca）</p><p class="text-success">成功，使用浅绿色(#3c763d)</p><p class="text-info">通知信息，使用浅蓝色（#31708f）</p><p class="text-warning">警告，使用黄色（#8a6d3b）</p><p class="text-danger">危险，使用褐色（#a94442）</p>
4. テキストの配置スタイル
<p class="text-left">我居左</p><p class="text-center">我居中</p><p class="text-right">我居右</p><p class="text-justify">我两端对齐</p>
Bootstrap では、操作を簡素化し、使いやすくするために、CSS でテキストの配置スタイルを実現するためによく使用される
text-alignに対応するために、上記の 4 つのクラスが使用されます。設定。
5. リスト
- Bootstrap のリストの設定は、基本的にネイティブ HTML の設定と同じです。
- があります。リスト間の 10 ピクセルのギャップ 下マージン
もちろん、Bootstrap はそのような小さな変更を行うだけではなく、いくつかのクラスを定義します私たちが使用するリスト。
ポイント list.list-unstyled に移動
.list-unstyled { padding-left: 0; list-style: none;}
ソースコードから、項目を除くこの情報を確認できます。数字を削除するだけでなく、デフォルトの左マージンもクリアされます。
<ol> <li class="list-unstyled"> 项目列表 <ul class="list-unstyled"> <li>带有项目编号</li> <li>带有项目编号</li> </ul> </li></ol>
このようなコードでは、3 つのリスト項目がきちんと 一緒に配置され、その中に Bullets
インラインリスト .list-inline
ドット付きリストに加えて、Bootstrap はクラス名 ".list-inline" を追加することでインライン リストを実装することもできます。単純に、垂直リストが水平リストに置き換えられ、箇条書き (番号付け) が削除され、水平表示が維持されます。 インライン リストは水平方向のナビゲーションを作成するために生まれたとも言えます。
水平定義 list.dl-horizontal
既存のコードは次のとおりです。
<dl class="dl-horizontal"> <dt>标题一：</dt> <dd>描述内容，我很喜欢前端，也很喜欢响应式布局，它能在个不同大小的屏幕下提供很好的体验，我现在是初学者，但是我会越来强的</dd> <dt>标题二：标题二：标题二：标题二：</dt> <dd>描述内容</dd></dl>
全体表示ブラウザの画面 次のように効果を確認できます。
画面サイズを変更してみましょう 限界値に達すると (小さい画面)、水平定義リストが元に戻ります。次のように状態を変更します:
これはなぜですか?ソースコードを見てみましょう！
ここにメディアクエリが追加されていることがわかります。 画面が 768px
より大きい場合にのみ、クラス名 .dl-horizontal を追加すると、水平方向の定義リスト効果が得られます。これを達成する主な方法は次のとおりです:- 将dt设置了一个左浮动，并且设置了一个宽度为160px
- 将dd设置一个margin-left的值为180px，达到水平的效果
- 当标题宽度超过160px时，将会显示三个省略号
现在再看看上面的效果是不是和这里的描述都是一样的呢？答案当然是肯定的 ^ ^
6. 代码
在Bootstrap主要提供了三种代码风格：
- 使用 ffbe95d20f3893062224282accb13e8f1cd55414ff5abdfea5dd958e7e547fdd 来显示单行内联代码——针对于 单个单词或单个句子 的代码
- 使用 e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec 来显示多行块代码——针对于 多行代码 （也就是成块的代码）
- 使用 5e4e803d53d659f332070b5d4aa430dbfef2f75ac4ec8153f0fa6efea5a0515d 来显示用户输入代码——表示 用户要通过键盘输入的内容
直接来看效果吧!
代码如下：（需要注意的是，**不管使用哪种代码风格，在代码中碰到小于号（ 11ef5bafbf9d727d95fdee6ca9b96700 ）都需要使用转义字符来替代）
code风格：<div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre class="brush:php;toolbar:false"></code>和<code><kbd></code></div>pre风格：<div><pre class="brush:php;toolbar:false"><ul> <li>...</li></ul>
e03b848252eb9375d56be284e690e873 元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在 pre标签 上添加类名 .pre-scrollable ，就可以控制代码块区域 最大高度为340px ，一旦超出这个高度，就会在 Y轴（纵向）出现滚动条。
当然，你也可以进行自定义配置，例如：只需要在自定义的css中，对于该类添加一个 word-wrap: normal; ，这样的话，在代码块边框横向宽度小于内部代码横向长度时，就会出现横向滚动条。
7. 表格
表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了 1种基础样式 和 4种附加样式 以及 1个支持响应式的表格 。
对应上面所说的，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
| .table | 基础表格 |
|---|---|
| .table-striped | 斑马线表格 |
| .table-bordered | 带边框的表格 |
| .table-hover | 鼠标悬停高亮的表格 |
| .table-condensed | 紧凑型表格 |
| .table-responsive | 响应式表格 |
.table 主要有三个作用：
- 给表格设置了margin-bottom:20px以及设置单元内距
- 在thead底部设置了一个2px的浅灰实线
- 每个单元格顶部设置了一个1px的浅灰实线
具体大家可以在源码中查看，后几种附加的样式在这里也不多说，但是下面说一些 注意事项：
- 后几种表格附加样式，必须在基础样式 .table 之后，例如 348dd8d08dc1fca854e56810252bf93d
- 响应式表格：其原理是在表格 外部添加容器 把普通表格 包裹 起来，下面进行详细说明：
<div class="table-responsive"><!-- 关键！容器包裹后实现响应式 --> <table class="table table-bordered"><!-- 设置表格样式，带边框的表格 --> <thead><!-- 一个表格应该有表头，若直接写tr>td这样的结构，浏览器会自动创建一个tbody包裹 --> </thead> <tbody><!--与上同理，即使你不创建，浏览器也会自动添加tbody包裹你的代码 --> </tbody> </table> </div>
下面是宽屏的效果（和普通的表格无区别）：
此处是窄屏的效果（可以看到滚动条的出现）：
表格行的类，表格情景
在上面已经说到了在Bootstrap中，为不同的情景做了不一样的颜色，用于不同的信息展示。只是在类名上做了一些小小的改变。下面就可以看到：（图片来自 慕课网 ）
只需要在 a34de1251f0d9fe1e645927f19a896e8 标签添加上这些类就可以使用了。
除此之外，通过源码可以看到，在这些颜色设置之外，Bootstrap还单独设置了 hover效果（悬浮状态） 的 颜色加深 效果（它对于不同的情况单独进行了颜色设置）。
实现也特别简单，只需要像 a6fe21ff73751ef0fddcf458eb38390e 这样，在 f5d188ed2c074f8b944552db028f98a1 标签加上一个 table-hover 的类。（在未对 a34de1251f0d9fe1e645927f19a896e8 进行情景颜色设置时，该类依然有效果，只是效果不一样，上面已经说到了，因为它的单独设置，具体请到源码中查看）
也正因为这样，如果你想自定义颜色的话， 除了修改 tr 元素的颜色样式外，在 .table-hover 表格中也要做相应的调整!
排版的内容到这里就告一段落了，下面进行表单的学习！加油！
参考：
- 慕课网：玩转Bootstrap
- Bootstrap中文官网：全局 CSS 样式