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

K@m@l · 8 نوفمبر 2015

أنشأت عدة أعمدة في صفحة 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>

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

إبراهيم منصور · 9 نوفمبر 2015

المشكلة :

تكمُن في عدم إغلاق وسم الجدول في العمود الأول ووسم الجدول في العمود الثاني كذلك،

الحل:

كل ما عليك فعله هو إغلاق وسم الجدول في العمودين فقط...

-----------------------------------------------------------------------------------------

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

--------------------------------------------------------------------------------------------------------------------------------------------

E.Nourddine · 11 نوفمبر 2015

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

<!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>.

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

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

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

السؤال

K@m@l

2 أجوبة على هذا السؤال

Recommended Posts

إبراهيم منصور

E.Nourddine

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية