• 0

كيف أحل هذا المشكل عند استعمال Bootstrap؟

أنشأت عدة أعمدة في صفحة html بالاعتماد على إطار العمل Bootstrap،لكن لا أدري لما لا تظهر، حيث أضفت :

columns-md-4

تحتوي على

<h3>

و

<p>

وهذا الكود بأكمله:

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="utf-8">
     <title>Random App </title>
     <meta name="description" content="Random App">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>

<style>
body{
padding-top: 40px
}
</style>

<body>

    <!--Navbar-->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
      <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>

            <a href="" class="navbar-brand">Random</a>

          </div> <!--Navbar Header-->
            <div class="collapse navbar-collapse" id="navbar-collapse">
             <ul class="nav navbar-nav">
               <li><a href="#feed">Feed</a>
               <li><a href="#gallery">Gallery</a>
               <li><a href="#feature">Feature</a>
               <li><a href="#contact">Contact</a>
             </ul>  
        </div> <!--End container-->
    </nav>  <!--End nav-->


             <!--jumbotron-->
        <div class="jumbotron">
         <div class="container text-center">
          <h1>Jumbotron</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor, erat quis suscipit auctor, justo lacus eleifend</p>
             </div><!--End Container-->
        </div><!--End jumbotron-->

        <div class="container">
         <div class="row">
          <div class="col-md-4">
            <h3>Table A</h3>
               <p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
             <blockquote>
             <footer>ujuyj</footer>
             </blockquote>
             <table class="table table-hover">
              <thead>
                <tr class="success">
                 <th>Name</th>
                 <th>Website</th>
                 <th>By</th>
                </tr>
               </thead>
               <tbody>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                </tbody>

                </div>

            <div class="col-md-4">
        <h3>Table B</h3>
         <p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
         <blockquote>
       <footer>ujuyj</footer>
       </blockquote>
       <table class="table table-hover">
        <thead>
          <tr class="success">
         <th>Name</th>
         <th>Website</th>
         <th>By</th>
        </tr>
         </thead>
               <tbody>
                 <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
         <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
         <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
         <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
         <tr>
                     <td>UnoCento</td>  
                     <td>www.example.test</td>
                     <td>TreCento</td>
                 </tr>
                </tbody>

            </div>




          </div><!--End Row-->
        </div><!--End Container>        



    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
</body>
</html>

ما هي المشكلة بالضبط؟ وكيف يمكنني حلها؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
المشكلة :
تكمُن في عدم إغلاق وسم الجدول في العمود الأول ووسم الجدول في العمود الثاني كذلك،
الحل:
كل ما عليك فعله هو إغلاق وسم الجدول في العمودين فقط...
-----------------------------------------------------------------------------------------
ولديك مشكلة أخرى وهي عدم إغلاق التعليق في نهاية الـ container بشكل صحيح، لذا اغلق التعليق بهذه الطريقة <-- End container --!>
--------------------------------------------------------------------------------------------------------------------------------------------

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

 فيما يلي تصحيح للكود الخاص بك:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Random App</title>
  <meta name="description" content="Random App">

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>

<style>
  body {
    padding-top: 40px
  }
</style>

<body>

  <!--Navbar-->
  <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a href="" class="navbar-brand">Random</a>

      </div>
      <!--Navbar Header-->
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#feed">Feed</a>
          </li>
          <li><a href="#gallery">Gallery</a>
          </li>
          <li><a href="#feature">Feature</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
      <!--End container-->
  </nav>
  <!--End nav-->


  <!--jumbotron-->
  <div class="jumbotron">
    <div class="container text-center">
      <h1>Jumbotron</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor, erat quis suscipit auctor, justo lacus eleifend</p>
    </div>
    <!--End Container-->
  </div>
  <!--End jumbotron-->

  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>Table A</h3>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
        <blockquote>
          <footer>ujuyj</footer>
        </blockquote>
        <table class="table table-hover">
          <thead>
            <tr class="success">
              <th>Name</th>
              <th>Website</th>
              <th>By</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="col-md-4">
        <h3>Table B</h3>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
        <blockquote>
          <footer>ujuyj</footer>
        </blockquote>
        <table class="table table-hover">
          <thead>
            <tr class="success">
              <th>Name</th>
              <th>Website</th>
              <th>By</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
            <tr>
              <td>UnoCento</td>
              <td>www.example.test</td>
              <td>TreCento</td>
            </tr>
          </tbody>
        </table>
      </div>




    </div>
    <!--End Row-->
  </div>
  <!--End Container>        



    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

 حيث أن الأخطاء المرتكبة يمكن سردها في :

  - عدم إغلاق <div> مع col-md-4 الكلاس الخاصة بإطار العمل bootstrap.

  - عدم إغلاق <div/>  الخاصة بـ <div class="container"> الموجودة في وسم <nav>.

والأخطاء تظهر من خلال الصور:

Hi37S.thumb.png.362d462f49169f647d68cbf4

nKmgs.thumb.png.e9a018717a46b118f271b1f6

من بين الطرق التي يعتمدها المبرمجون لعدم الوقوع في مثل هذه الأخطاء، هي كتابة الكود بشكل منظم، Indentation ونظيف، حتى تتمكن من إغلاق أي وسم تم فتحه.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن