2016-08-30 4 views
1

Ich weiß nichts über bootstrap und wie ein Gitter mit bootstrap zu machen. Alles, was ich weiß, ist, wie man jqgrid macht und momentan verwende ich jqgrid zu meinem aktuellen Projekt. Ich habe versucht, über grundlegende Bootstrap in w3school zu lesen, und ich sehe nicht, wie man ein Gitter, ich meine, ist wie ein jqgrid. Gibt es einen Artikel oder ein Tutorial zum Erstellen eines Grids mit einem Bootstrap? Teilen Sie es bitte. Vielen Dank.Was ist der Unterschied zwischen dem BootSrap-Grid und jqgrid?

UPDATE

ich eine alte jqGrid v 4.3.3

+1

Version 4.3.3 ist mehr als 4 Jahre alt. Es hat keine Unterstützung und ist praktisch tot. Es gibt jetzt zwei Hauptgabeln von jqGrid: [free jqGrid] (https://github.com/free-jqgrid/jqGrid) (die aktuelle Version ist 4.13.4), die ich entwickle, und kommerziell [Guriddo jqGrid JS] (http://guriddo.net/?page_id=103334) (die aktuelle Version ist 5.1.1). Ich empfehle Ihnen dringend, eines der Forks zu wählen und jqGrid von der Fork auf die neueste Version zu aktualisieren. – Oleg

+0

@Oleg Ich würde gerne fragen. Wenn ich von 4.3.3 auf irgendeinen Ihrer Vorschläge umstelle, muss mein Projekt auch Änderungen vornehmen oder nicht? Thx für die Antwort –

+0

Ich benutze 4.x.y Konvertierung in Versionen von freien jqGrid nur, weil ich versuche, maximale Kompatibilität mit alten (4.x.y) Versionen von jqGrid zu halten. Dennoch gibt es keine Gewähr, dass keine Änderungen erforderlich sind. Zuallererst solltest du es einfach probieren **. Sie können freies jqGrid direkt von CDN laden. Siehe [der Wiki-Artikel] (https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs). – Oleg

Antwort

1

jqgrid und bootstrap Gitter ganz andere Sache ist, aber Sie können Bootstrap-Raster ist jqGrid anwenden, aber es funktioniert nicht Sinn ergeben.
=======================================
jqgid
jqgrid ist Art von Funktionalität, in der Sie json Daten in URL übergeben, und es automatisch Tabellenstruktur (genannt jqgrid), in denen es Such-, Sortier-, Gruppierungsfunktionalität bieten. jqgrid Beispiele gefunden Sie here

Bootstrap-Gitter

Webseite in 12 Teile unterteilt ist, und nach dem, wie Sie Speicherplatz zuweisen ist so etwas wie Bootstrap-Gitter, wie col-md-4, col-xs-4, col-lg-4 sind die Arten wie pro Gerätebildschirm. Beispiel bootstrap Gitter, fand man here

+0

Können Sie ein Jfiddle zur Erstellung eines Grids im Bootstrap bereitstellen? Wenn es nicht in Ordnung ist. –

+0

sicher, ich werde .. warten Sie eine Minute – yash

+0

http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp Dies ist ein Link, wo Sie separaten Teil der Webseite finden. das ist nur Demo, in der tatsächlichen Webseite, was auch immer Inhalt Sie schreiben

bla bla
, der gesamte Inhalt wird nur in dieser Breite angezeigt – yash

0

Hallo bin mit Wenn Sie einige Tabellen zu erstellen suchen, um mit Bootstap Sie auf den untenstehenden Link für Datentabellen Kreationen beziehen. https://datatables.net/examples/styling/bootstrap.html

Es ist sehr einfach zu implementieren und kommt mit vielen Plugins, die es einfach zu implementieren macht.

Hoffe, es hilft

0

Bootstrap-Gittersystem einen Bildschirm in 12 Spalten devides. Es ist verantwortlich für die Reaktionsfähigkeit von Bootstrap über mehrere Geräte hinweg. Die verschiedenen im Bootstrap verunreinigten Bildschirmgrößen sind Small sm Medium md Extra Small xs und Large lg. Grundsätzlich Bootstrap ist ein Front-End-Web-Framework hat css und javascript Komponenten, die es einfach für Sie, schöne Front-End erstellen. Um ein Raster in Bootstrap zu erstellen, müssen Sie zunächst einen Container erstellen, dann erstellen Sie eine Zeile, nach, dass Sie Ihre Spalten definieren, indem zuweist .col-md, .col-lg, . col-xs, . col-sm Klassen zu Ihrem div

Unten ist ein Beispiel eines Gitters System. Referenz von Bootstrap Dokumentation http://getbootstrap.com/css/

 <!-- Stack the columns on mobile by making one full-width and the other half-width --> 
<div class="row"> 
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div> 

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> 
    <div class="row"> 
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    </div> 

    <!-- Columns are always 50% wide, on mobile and desktop --> 
    <div class="row"> 
     <div class="col-xs-6">.col-xs-6</div> 
     <div class="col-xs-6">.col-xs-6</div> 
    </div> 

von diesem jsfiddle bei einer Implementierung Schauen Sie auch https://jsfiddle.net/KyleMit/Gt25L/

1

Sie nicht geschrieben haben, welche Version von jqGrid Sie verwenden und von der Gabel von jqGrid (free jqGrid, kommerziellen Guriddo jqGrid JS oder einer alten jqGrid in Version < = 4.7).

Alte Versionen von jqGrid verwenden jQuery UI CSS für jqGrid-Elemente. Bei neuen Versionen können Sie stattdessen Bootstrap CSS verwenden. Here finden Sie ein Beispiel für die Verwendung von Bootstrap mit jqGrid. Was Sie hauptsächlich tun müssen, ist das Bootstrap-CSS auf der Seite und die Option guiStyle: "bootstrap" hinzuzufügen. Es ist alles.

AKTUALISIERT: Zusätzlich stellt Bootstrap einige CSS-Klassen zur Verfügung, die helfen, Spalten des Rasters bei niedriger Auflösung zu verstecken. Sie können versuchen, die Demo http://jsfiddle.net/OlegKi/andm1299/45/ und Größe des Fensters mit dem Raster. Die letzte Spalte (Spalte Duration) verwendet "hidden-xs" Bootstrap-Klasse. Sie werden sehen, dass die Spalte verschwindet, wenn das äußere Fenster kurz genug ist.

Verwandte Themen