Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

Bootstrapを使用して要素のフロートをクリアします

要素のフロートをクリアするには、.clearfixBootstrapクラスを使用します。

例

次のコードを実行して、要素のフロートをクリアすることができます

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "clearfix" style = "background: orange;border: 1px solid #000; padding: 10px;">
         <div class = "pull-left" style = "background: blue; color: white;">
            left
         </div>
         <div class = "pull-right" style = "background: blue; color:white;">
            right
         </div>
      </div>
   </body>
</html>

  1. ブートストラップを使用した分割ボタンのドロップダウン

    分割ボタンのドロップダウンは、ドロップダウンボタンと同じ一般的なスタイルを使用しますが、ドロップダウンとともにプライマリアクションを追加します。分割ボタンの左側には主要なアクションがあり、右側にはドロップダウンを表示するトグルがあります。 例 次のコードを実行して、ボタンのドロップダウンを分割することができます- <!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>    

  2. JavaScriptを使用して現在の要素にアクティブなクラスを追加するにはどうすればよいですか？

    JavaScriptを使用して現在の要素にアクティブなクラスを追加するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    .btn {       border: none;       outline: non