Bootstrap の採用 --modal box_html/css_WEB-ITnose

前に書いています

このブログ投稿では、私が作成したランドスケープ Web ページに基づいた Bootstrap の使用について説明します。 Web ページのスクリーンショットは次のとおりです。

完全な Web ページの効果とコードを表示できます。ここまたはCodePenで。この Web ページで達成したい主な効果のいくつかをここで繰り返しましょう。以前のブログ投稿「Bringing Bootstrap to Your Arms?? タブ ページ」を読んだ人は、このセクションを直接スキップしてください:

1. ナビゲーション バー ログインをクリックした後と登録ボタンを押すと、ログインと登録のモーダルボックスがポップアップし、ログインと登録のウィンドウが切り替わり、メニューバーがレスポンシブになり、「ブロガーmyvinのその他の情報」で情報モーダルボックスがポップアップします

2. 。ナビゲーションバーでオプションをプルダウンできます。ドロップダウンで九寨溝「麗江」水蓮洞をクリックして、対応するタブを見つけます

3. スライドショー大画面カルーセル

4. タブページ

前記事「ブートストラップを活用する」 「タブ ページの章」では、タブ ラベルと、クリックして対応するタブ ページにジャンプすることについて説明しました。その前に、大画面スライド カルーセルに関連するコンテンツについて簡単に説明しました。ナビゲーション バーの内容について説明しましたが、今日はモーダル ボックス (モーダル) の最後の部分について説明します。モーダル ボックスとその関連効果については、ここをクリックしてご覧ください。

情報モーダル ボックス

まず最初に説明したいのは、ナビゲーション バーにある「ブロガー myvin に関するその他の情報」のモーダル ボックスです。

最も単純なモーダル ボックスは、ヘッド、ボディ、下部のボタンで構成されます。静的なモーダル ボックスは次のとおりです:

<p class="modal fade">  
<p class="modal-dialog">    
<p class="modal-content">      
<p class="modal-header">        
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;
</span></button>        
<h4 class="modal-title">模态框头部</h4>      
</p>      <p class="modal-body">       
 <p>模态框主体部分</p>      
 </p>      
 <p class="modal-footer">        
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>        
 <button type="button" class="btn btn-primary">保存</button>      
 </p>    
 </p><!-- /.modal-content -->  
 </p><!-- /.modal-dialog --></p><!-- /.modal -->

アニメーション効果が必要ない場合 (ここではフェードインとフェードです)。 -out エフェクト）を削除するだけで、クラスのフェードを入れることができます。

モーダルヘッダークラ​​スの p はヘッダーであり、ここに適切なヘッダー、つまりタイトルを追加できます。モーダルボディクラスの p はメインコンテンツであり、必要に応じて適切なコンテンツを追加します。 modal-footer クラスは下部にあり、通常は「ウィンドウを閉じる」、「保存」、または同様のコンテンツを追加します。

デモの「ブロガー myvin に関するその他の情報」からポップアップするモーダル ボックスは次のとおりです:

実装されるモーダル ボックスは、タイトル、本文、ボタンを除いて、上記の静的なモーダル ボックスと非常によく似ています。これは閉じられたボタンであるため、これが閉じられたボタンであることを示す解除データ、つまり data-dismiss="modal" が保持されます。コードを直接投稿します:

<p class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<p class="modal-dialog">        
<p class="modal-content">          
<p class="modal-header">            
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;
</span></button>            
<h4 class="modal-title" id="myModalLabel">博主myvin的其他信息</h4>          
</p>          
<p class="modal-body">            
<p>当爱情来得过于汹涌，我们该如何抉择？</p>
<p>当情感在时间的浪潮里激情得澎湃，我们又该何去何从？</p>
<p>“不死鸟，不死鸟。”有太多的东西徘徊在我们的周身，或激情或萧条，我们又该怎么权衡？</p>
<p>《不死鸟》，也许这里有你曾经经历过的点点滴滴，也许有你即将经历的枝枝叶叶。</p>
<p>然而在某些东西面前，爱情又是那么的脆弱......</p>
<p>摊开《不死鸟》，就是摊开你的一生......</p>
<p><a href=&#39;http://www.rongshuxia.com/book/5509439&#39;  title=&#39;博主myvin的其他信息&#39; target=&#39;_blank&#39;>
点击查看博主myvin的遗作</a>(博主又名：晓马哥vin)</p>
<p><a href=&#39;http://www.rongshuxia.com/book/5509439&#39; title=&#39;博主myvin的其他信息&#39; target=&#39;_blank&#39;>
http://www.rongshuxia.com/book/5509439<;/a></p>          
</p>          
<p class="modal-footer">           
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>         
  </p>        
  </p>      
  </p>    
  </p>

最初に述べたように、これは静的なモーダル ボックスであるため、クリックしてモーダル ボックスをポップアップしても効果は認識されません。そのため、次にしなければならないことは、 「blogger myvin その他の情報」をクリックすると、上で書いたモーダル ボックスの効果がポップアップします。もちろん、実装は非常に簡単です。まず、ずっと前に書いたナビゲーション バーのコードを見てみましょう:

<li data-toggle="modal" data-target="#about"><a href="#" >博主myvin的其他信息</a></li>

ここでしなければならないことは、この li をクリックしてその情報モーダルにジャンプすることです。作成したモーダルには id=about があるため、li のターゲットをこのモーダルにするだけで済みます。 ここではデータを使用します:

data-target="#about"

次に、この li をクリックして、通常のフェードインでモーダルをポップアップします。フェードアウト。

登録ボタンとログインボタン

登録ボタンとログインボタンは、実際にはそれぞれモーダルです。実現される効果は次のとおりです

ログインボタンまたは登録ボタンをクリックすると、実際には上部に 2 つのタブがあります。モーダルの登録ボタンまたはログインボタンをクリックして、それぞれ対応するタブに切り替えます。つまり、タブとモーダルの組み合わせです。以前にタブについて説明しましたが、上記のモーダルと組み合わせることで、この効果を達成するのは難しくありません。

ここでは、モーダルヘッダーを省略し、モーダルボディに 2 つのタブのみを追加しています。タブは ul とタブコンテンツで構成されています。

したがって、コードは次のようになります:

<p id="signin-signup-tab" class="modal fade">      
<p class="modal-dialog">        
<p class="modal-content">          
<p class="modal-body">            
<button type="button" class="close" data-dismiss="modal" aria-label="Close">x</button>            
<ul class="nav nav-tabs" role="tablist">              
<li id="signin-li"><a href="#signin-tab" role="tab" data-toggle="tab">登陆</a></li>              
<li id="signup-li"><a href="#signup-tab" role="tab" data-toggle="tab">注册</a></li>            
</ul>            
<p class="tab-content" id="signin-signup-tab">              
<p class="tab-pane" id="signup-tab">                
<form action="" class="form col-md-12 center-block">                  
<p class="form-group">                    
<input type="text" class="form-control input-lg" placeholder="请输入登陆邮件" title="邮箱正确格式：xxx@xxx.com">
</p>                  
<p class="form-group">                    
<input id="password1" type="password" class="form-control input-lg" placeholder="请输入登陆密码">                  
</p>                  
<p class="form-group">                    
<input id="password2" type="password" class="form-control input-lg" placeholder="请再次输入密码">   
</p>                  
<p class="form-group">                    
<input type="password" class="form-control input-lg" placeholder="请输入用户昵称">                  
</p>                  
<p class="form-group">                    
<input type="password" class="form-control input-lg" placeholder="请输入验证码">                  
</p>                  
<p class="form-group">                    
<button class="btn btn-primary btn-lg btn-block">注册</button>                  
</p>                
</form>              
</p>              
<p class="tab-pane" id="signin-tab">                
<form action="" class="form col-md-12 center-block">                  <
p class="form-group">                    
<input type="text" class="form-control input-lg" placeholder="请输入登陆邮件">                  
</p>                  
<p class="form-group">                    
<input type="password" class="form-control input-lg" placeholder="请输入登录密码">                  
</p>                  
<p class="form-group">                   
 <button class="btn btn-primary btn-lg btn-block">立刻登录</button>                    
 <span><a href="newforgot.html">忘记密码</a></span>                  
 </p>                
 </form>              
 </p>            
 </p>          
 </p>          
 <p class="modal-footer">          
 </p>        
 </p>      
 </p>    
 </p>

同様に、ナビゲーションに追加するには 列のログイン/登録ボタンにターゲットを追加します:

 <li data-toggle="modal" data-target="#signin-signup-tab" id="signin-button"><a href="#" >登陆</a></li>   
 <li data-toggle="modal" data-target="#signin-signup-tab" id="signup-button"><a href="#" >注册</a></li>

しかし、次のように書くと小さな問題が発生します:

タブについてチャットするとき、アクティブなタブを設定する必要があると言いました。タブの 1 つのクラス。初期化中にタブが表示されているため、このログイン/登録モーダルで、タブの 1 つにアクティブ クラスを追加すると、たとえばアクティブ クラスをログイン li に追加し、対応するタブコンテンツを選択すると、結果は自然に次のようになります:

最初のログインボタンをクリックしてください。最初に登録ボタンをクリックすると、ポップアップモーダルのログインタブが表示されます。 ? 登録にアクティブを追加しただけなので、タブではアクティブなものが最初に表示されます。どちらを先にクリックしても、結果は常に次のようになります:

登録とログインの両方にアクティブなクラスを追加したらどうなるでしょうか?効果は次のとおりです:

active が追加されるため、両方のタブが開いた状態で表示されます。ログイン p が登録 p の上にあるため、ログイン タブが常に表示されます。

では、両方に active を追加しない場合はどうなるでしょうか?その場合の効果は次のようになります:

明らかに、上記の 3 つの状況は実装の効果と一致しません。

ここでは、直接的で不器用なメソッドを示します。つまり、どのボタンをクリックすると、対応するボタンにアクティブなクラスが追加され、同時に他のボタンのアクティブなクラスが削除されます。js 実装は次のとおりです。

そのような基本的なWebページが完成したとしても。

概要

Bootstrap についての説明はいくつかの部分に分かれていますので、ご興味があれば、同時に公式 Web サイトにログオンして、Bootstrap に関する詳細なドキュメントをご覧ください。

最後に、皆さんが楽しいパレード休暇を過ごせることを祈っています。