Bootstrap-raster oder Tabelle für eine responsive website?

Ich bin auf der Suche konvertieren C# ASP.NET MVC 3-Webanwendung auf einem MVC-5. Während dieses Prozesses möchte ich erstellen Sie eine ansprechende Tabelle durch den Einsatz von bootstrap. Würde es besser sein, auf dem bootstrap grid system mit der Verwendung von tags oder wäre es besser zu nutzen, eine Tabelle? Gibt es eine Methode, um erhöhen Sie die Anzahl der Spalten im grid-system, um eine Zahl größer als 12?

Hinweis:
Die neue Anwendung nutzt bootstrap 3.2.0, jquery 1.11.1, mvc 5.2.0 n razor 3.2.0.
Der Antrag muss korrekt auf IE8 (wohnen auf jquery-1.X-Zweig aus diesem Grund).

Unten ist eine Beispiel-Tabelle aus der aktuellen Anwendung, dass ich unsicher bin, wie format, um einen ähnlichen Blick in eine ansprechende Benutzeroberfläche.

<table class="Assignmenttable">
    <tbody>
        <tr class="td">
            <th id="Assignment_Title" colspan="4" style="width:20%"> </th>
            <th id="blank" class="blank" colspan="1" rowspan="1">
            </th>
            <th id="Assignment_Title" colspan="9" style="width:30%"> First</th>
            <th id="blank" class="blank" colspan="1" rowspan="1">
            </th>
            <th id="Assignment_Title" colspan="9" style=" width:30%"> Second</th>
            <th id="blank" class="blank" colspan="1" rowspan="1">
            </th>
            <th id="Assignment_Title" colspan="4" style="width:11%"> Complete</th>
        </tr>

        <tr class="td">
            <th rowspan="3" colspan="1" style="font-size: medium">Assignment</th>
            <th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Woot</th>

            <th id="blank" class="blank" colspan="1" rowspan="1">

            </th>
            <th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 1</th>
            <th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 2</th>
            <th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 3</th>

            <th id="blank" class="blank" colspan="1" rowspan="1">

            </th>
            <th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 4</th>
            <th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 5</th>
            <th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 6</th>

            <th id="blank" class="blank" colspan="1" rowspan="1">

            </th>
            <th colspan="4" rowspan="2" style="font-size: medium; min-width:12%">Task 7</th>
        </tr>

        <tr class="td">
            <th id="blank" class="blank" colspan="1">
            </th>
            <th id="blank" class="blank" colspan="1">
            </th>
            <th id="blank" class="blank" colspan="1">
            </th>
        </tr>

        <tr class="td">
            <th></th>
            <th id="topBarDates">PL</th>
            <th id="topBarDates">LE</th>
            <th id="blank" class="blank" colspan="1" rowspan="1"></th>
            <th></th>
            <th id="topBarDates">PL</th>
            <th id="topBarDates">LE</th>
            <th></th>
            <th id="topBarDates">PL</th>
            <th id="topBarDates">LE</th>
            <th></th>
            <th id="topBarDates">PL</th>
            <th id="topBarDates">LE</th>
            <th id="blank" class="blank" colspan="1" rowspan="1"></th>
            <th></th>
            <th id="topBarDates">PL</th>
            <th id="topBarDates">LE</th>
            <th></th>
            <th id="topBarDates">PL</th>
            <th id="topBarDates">LE</th>
            <th></th>
            <th id="topBarDates">PL</th>
            <th id="topBarDates">LE</th>
            <th id="blank" class="blank" colspan="1" rowspan="1"></th>

            <th> P1 </th>
            <th colspan=""> P2</th>
            <th id="topBarDates">PL</th>
            <th id="topBarDates">LE</th>
        </tr>


        <!-- This row is for each assignment entry-->
        <tr class="td" style="height: 60px; max-height: 100px">

            <td id="td" class="td" style="width: 350px">
                Project 2
            </td>


            <td id="LongDelay" align="center">
                <input id="item_Shipped" name="item.task1" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task1" type="hidden" value="false">
            </td>
            <td id="ProjectDate">11-Apr-13</td>
            <td id="ProjectDate">17-Aug-13</td>

            <td id="blank" class="blank" colspan="1"></td>


            <td id="LongDelay" align="center">
                <input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
            </td>
            <td id="ProjectDate">
                05-Apr-14
            </td>
            <td id="ProjectDate">
                04-Aug-14
            </td>


            <td id="LongDelay" align="center">
                <input id="item_taskComplete" name="item.task" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task" type="hidden" value="false">
            </td>
            <td  id="ProjectDate">18-Apr-14</td>
            <td  id="ProjectDate">06-Aug-14</td>


            <td id="LongDelay" align="center">
                <input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
            </td>
            <td id="ProjectDate">
                21-Feb-14
            </td>
            <td id="ProjectDate">
                15-Apr-14
            </td>

            <td id="blank" class="blank" colspan="1"></td>


            <td id="SlightDelay" align="center">
                <input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
            </td>
            <td title="" id="ProjectDate">28-Mar-14</td>
            <td title="" id="ProjectDate">11-Apr-14</td>


            <td id="LongDelay" align="center">
                <input id="item_task6" name="item.task6" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task6" type="hidden" value="false">
            </td>
            <td title="" id="ProjectDate">15-Apr-14</td>
            <td title="" id="ProjectDate">28-Aug-14</td>

            <td colspan="3"></td>
            <td id="blank" class="blank" colspan="1"></td>



            <td id="LongDelay" align="center">
                <input id="item_taskAccepted" name="item.taskAccepted" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskAccepted" type="hidden" value="false">
            </td>
            <td id="LongDelay" align="center">
                <input id="item_task2Accepted" name="item.task2Accepted" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task2Accepted" type="hidden" value="false">
            </td>
            <td id="ProjectDate">30-Apr-14  </td>
            <td id="ProjectDate">07-Aug-14</td>


        </tr>
        <tr style="height: 4px">
            <th id="blank" class="blank" colspan="29"></th>
        </tr>
    </tbody>
</table>

Vielen Dank im Voraus für jeden Rat!

"Gibt es eine Methode, um erhöhen Sie die Anzahl der Spalten im grid-system, um eine Zahl größer als 12?" Ja. Diese Zahl ist eine variable im Less-code. Einfach den Wert ändern und neu kompilieren der Less-Dateien zu CSS.

InformationsquelleAutor Nathan Perry | 2014-08-06

asp.net-mvc-5 c#html twitter-bootstrap-3

0

Können Sie Einblick in Bootstrap-Tabellen.

Zwischen die Wahl zu verwenden, - Tabellen oder-Raster, es hängt ganz von, was Sie versuchen zu zeigen. Ohne richtige Beispiele, es ist schwer, wirklich zu empfehlen, welches besser zu verwenden.

Wenn Sie möchten, verwenden Bootstrap-Tabelle für deinen code, es ist so einfach als nur darum, ein .table Klasse für Ihre <table> element. Dann, für die es, um richtig zu skalieren, müssen Sie zum entfernen der inline-Stile an Ihre <th>, <tr>, und <td> Elemente. Auch die colspans.
- Ich habe ein Beispiel erstellt, was die aktuelle Ansicht sieht mit der reaktionsschnellen Benutzeroberfläche, die enthält die Formatvorlagen, die im oben genannten Beispiel. Lassen Sie mich wissen, was Sie denken. jsfiddle.net/tester123/muofm3zb
InformationsquelleAutor Dominic

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.