検索
ホームページウェブフロントエンドhtmlチュートリアルBootstrap 入門メモ (1) Typesetting_html/css_WEB-ITnose

1. タイトル

Bootstrap でのタイトルの使用方法は通常の HTML と同じです。

1. タイトル要素を

から

まで並べます。 ; ただし、デフォルトのスタイルはブートストラップでリセットされています。ソース コードから、次の共通の機能がわかります:

フォントの色とフォント スタイルは親要素から継承され、フォントの太さは 500 です。行の高さはすべて 1.1 に設定されます (フォントサイズの 1.1 倍でもあります)

{ font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;}

  1. には、サイズの異なるタイトルで次のような違いがあります。 : Bootstrap の
  2. タイトルのさまざまなレベルのフォント サイズ設定は、h1=36px、h2=30px、h3=24px、h4=18px、h5=14px、および h6=12px です。 margin-topmargin-bottom の値をリセットします。 リセット後の h1~h3 の値はすべてリセットされます。 20px; h4~h6
  3. リセット値はすべて
10px

です。 また、Bootstrap では、タイトル以外の要素とタイトルを 同じスタイル

にするために、

.h1~.h6

も特別に指定しています。クラス名が定義されています。以下に示すように:

Bootstrap では、次のコードは同じ効果を表示します。

<!--Bootstrap中的标题--><h1 id="Bootstrap标题一">Bootstrap标题一</h1><h2 id="Bootstrap标题二">Bootstrap标题二</h2><h3 id="Bootstrap标题三">Bootstrap标题三</h3><h4 id="Bootstrap标题四">Bootstrap标题四</h4><h5 id="Bootstrap标题五">Bootstrap标题五</h5><h6 id="Bootstrap标题六">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 id="Bootstrap标题一-small-我是副标题-small">Bootstrap标题一<small>我是副标题</small></h1>

  1. もちろん、この設定は

    から

  2. まで使用できることは間違いありません。
    。サブタイトル には独自のスタイルがいくつかあります:
行の高さはすべて 1 に設定され、フォントの太さは通常の効果 (太字ではない) に変更されます。グレー (#999) に設定されます。

h1 ~ h3 内の タグ テキストのサイズは現在のフォント サイズの 65% に設定され、h4 ~ h6 内のフォント サイズは現在のフォント サイズの 75% に設定されます。

    2. 本文
  1. Bootstrap のグローバル テキスト スタイルは次のとおりです。
  2. フォント サイズは 14px です
  3. 行の高さは 1.42867143 (約 20px)
フォントの色は #333

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 の設定と同じです。
  1. があります。リスト間の 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-horizo​​ntal

既存のコードは次のとおりです。

<dl class="dl-horizontal">    <dt>标题一:</dt>    <dd>描述内容,我很喜欢前端,也很喜欢响应式布局,它能在个不同大小的屏幕下提供很好的体验,我现在是初学者,但是我会越来强的</dd>    <dt>标题二:标题二:标题二:标题二:</dt>    <dd>描述内容</dd></dl>

全体表示ブラウザの画面 次のように効果を確認できます。

画面サイズを変更してみましょう 限界値に達すると (小さい画面)、水平定義リストが元に戻ります。次のように状態を変更します:

これはなぜですか?ソースコードを見てみましょう!

ここにメディアクエリが追加されていることがわかります。 画面が 768px

より大きい場合にのみ、クラス名 .dl-horizo​​ntal を追加すると、水平方向の定義リスト効果が得られます。これを達成する主な方法は次のとおりです:
  1. 将dt设置了一个左浮动,并且设置了一个宽度为160px
  2. 将dd设置一个margin-left的值为180px,达到水平的效果
  3. 当标题宽度超过160px时,将会显示三个省略号

现在再看看上面的效果是不是和这里的描述都是一样的呢?答案当然是肯定的 ^ ^

6. 代码

在Bootstrap主要提供了三种代码风格:

  1. 使用 来显示单行内联代码——针对于 单个单词或单个句子 的代码
  2. 使用
     来显示多行块代码——针对于 多行代码 (也就是成块的代码) 
  3. 使用 来显示用户输入代码——表示 用户要通过键盘输入的内容

直接来看效果吧!

代码如下:(需要注意的是,**不管使用哪种代码风格,在代码中碰到小于号( )都需要使用转义字符来替代)

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>
kbd风格:

请输入ctrl+c来复制代码,然后使用ctrl+v来粘贴代码

 元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在 <strong>pre标签</strong> 上添加类名 .pre-scrollable ,就可以控制代码块区域 <strong>最大高度为340px</strong> ,一旦超出这个高度,就会在 <strong>Y轴(纵向)出现滚动条。</strong>     <p> 当然,你也可以进行自定义配置,例如:只需要在自定义的css中,对于该类添加一个 word-wrap: normal; ,这样的话,在代码块边框横向宽度小于内部代码横向长度时,就会出现横向滚动条。 </p>    <h2 id="表格">7. 表格</h2>    <p> 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了 <strong>1种基础样式</strong> 和 <strong>4种附加样式</strong> 以及 <strong>1个支持响应式的表格</strong> 。 </p>    <p>对应上面所说的,Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:</p>    
.table 基础表格
.table-striped 斑马线表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停高亮的表格
.table-condensed 紧凑型表格
.table-responsive 响应式表格

.table 主要有三个作用:

  • 给表格设置了margin-bottom:20px以及设置单元内距
  • 在thead底部设置了一个2px的浅灰实线
  • 每个单元格顶部设置了一个1px的浅灰实线

具体大家可以在源码中查看,后几种附加的样式在这里也不多说,但是下面说一些 注意事项:

  1. 后几种表格附加样式,必须在基础样式 .table 之后,例如
  2. 响应式表格:其原理是在表格 外部添加容器 把普通表格 包裹 起来,下面进行详细说明:
  3. <div class="table-responsive"><!-- 关键!容器包裹后实现响应式 -->   <table class="table table-bordered"><!-- 设置表格样式,带边框的表格 -->   <thead><!-- 一个表格应该有表头,若直接写tr>td这样的结构,浏览器会自动创建一个tbody包裹 -->   </thead>   <tbody><!--与上同理,即使你不创建,浏览器也会自动添加tbody包裹你的代码 -->   </tbody> </table> </div>

    下面是宽屏的效果(和普通的表格无区别):

    此处是窄屏的效果(可以看到滚动条的出现):

    表格行的类,表格情景

    在上面已经说到了在Bootstrap中,为不同的情景做了不一样的颜色,用于不同的信息展示。只是在类名上做了一些小小的改变。下面就可以看到:(图片来自 慕课网 )

    只需要在

    标签添加上这些类就可以使用了。

    除此之外,通过源码可以看到,在这些颜色设置之外,Bootstrap还单独设置了 hover效果(悬浮状态)颜色加深 效果(它对于不同的情况单独进行了颜色设置)。

    实现也特别简单,只需要像

    这样,在
    标签加上一个 table-hover 的类。(在未对 进行情景颜色设置时,该类依然有效果,只是效果不一样,上面已经说到了,因为它的单独设置,具体请到源码中查看)

    也正因为这样,如果你想自定义颜色的话, 除了修改 tr 元素的颜色样式外,在 .table-hover 表格中也要做相应的调整!

    排版的内容到这里就告一段落了,下面进行表单的学习!加油!

    参考:

    • 慕课网:玩转Bootstrap
    • Bootstrap中文官网:全局 CSS 样式

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい