Hallo, Gast
Du musst dich registrieren bevor du auf unserer Seite Beiträge schreiben kannst.

Benutzername/E-Mail:
  

Passwort
  





Durchsuche Foren

(Erweiterte Suche)

Foren-Statistiken
» Mitglieder: 76
» Neuestes Mitglied: jessyjose90
» Foren-Themen: 70
» Foren-Beiträge: 222

Komplettstatistiken

Benutzer Online
Momentan sind 14 Benutzer online
» 0 Mitglieder
» 14 Gäste

Aktive Themen
educational system in Ind...
Forum: Smalltalk
Letzter Beitrag: Ameer123
06.01.2018, 04:14
» Antworten: 0
» Ansichten: 71
Anpassen config.json
Forum: Bootstrap 3
Letzter Beitrag: gromheisei
02.01.2018, 17:02
» Antworten: 0
» Ansichten: 104
Parallax-Effekt mit Boots...
Forum: Bootstrap Snippet
Letzter Beitrag: The-Error
29.12.2017, 13:12
» Antworten: 0
» Ansichten: 106
Bootstrap in WordPress ei...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
29.12.2017, 11:19
» Antworten: 1
» Ansichten: 102
Sidebar auf anderer Seite...
Forum: Bootstrap 3
Letzter Beitrag: Croonas
20.12.2017, 17:50
» Antworten: 2
» Ansichten: 147
Sidebar rechts fixieren
Forum: Bootstrap 3
Letzter Beitrag: OnkelRana
19.12.2017, 08:41
» Antworten: 2
» Ansichten: 139
Nochmal Galerie
Forum: Bootstrap 3
Letzter Beitrag: Emess
17.12.2017, 23:46
» Antworten: 9
» Ansichten: 331
Zwei Fehler sind mir noch...
Forum: Bootstrap 3
Letzter Beitrag: Emess
12.12.2017, 14:55
» Antworten: 2
» Ansichten: 153
Bootstrap 4 Cards
Forum: Bootstrap Snippet
Letzter Beitrag: The-Error
11.12.2017, 14:48
» Antworten: 0
» Ansichten: 183
Masonry-Gallery mit Light...
Forum: Bootstrap Snippet
Letzter Beitrag: The-Error
08.12.2017, 02:09
» Antworten: 0
» Ansichten: 112

 
Bug educational system in India........ ( Engineering & Management Studies)
Geschrieben von: Ameer123 - 06.01.2018, 04:14 - Forum: Smalltalk - Keine Antworten

Hi this is Ajay.............................  an educational consultant .......................... from india..................................................

rv college of engineering bangalore
bms college of engineering bangalore
MS Ramaiah Institute of Management Bangalore
Mount Carmel Institute of Management Bangalore
St.Joseph's College of Business Administration In Bangalore

Sir M Visvesvaraya Institute of Technology bangalore
New Horizon College of Engineering bangalore
MVJ College of Engineering bangalore

Jss Academy Of Technical Education bangalore
International Institute of Business Studies bangalore
Institute of Finance and International Management Bangalore
Institute of Business Management and Technology Bangalore
Indus Business Academy Bangalore
Don Bosco Institute of Management Bangalore
Bangalore Institute of Management Studies Bangalore
Amity Global business School Bangalore
AIMS INSTITUTES Bangalore

Adarsh Business School Bangalore
ACHARYA BANGALORE B-SCHOOL BANGALORE
DayanandaSagar College of Engineering bangalore
Dayananda Sagar Business Academy bangalore
BMS Institute Of Technology Bangalore

Alliance University Bangalore
PES University Bangalore
Jain University Bangalore
Dayananda Sagar University Bangalore
Christ University Bangalore
REVA University Bangalore

Drucke diesen Beitrag

  Anpassen config.json
Geschrieben von: gromheisei - 02.01.2018, 17:02 - Forum: Bootstrap 3 - Keine Antworten

Hallo biite um Hilfe,
wie kann ich eine angepasste config.json als css importieren oder wie funktioniert das ganze? vielen dank.

Drucke diesen Beitrag

  Parallax-Effekt mit Bootsrap 4 /3
Geschrieben von: The-Error - 29.12.2017, 13:12 - Forum: Bootstrap Snippet - Keine Antworten

Einfacher Parallax-Effekt mit parallax.js

DEMO: http://bootstrap-forum.de/beispiele/para...allax.html


HTML:

Code:
<div class="parallax-window" data-parallax="scroll" data-image-src="img/01.jpg">
        <div class="text-center parallax-text">
            <h1>Parallax-Effekt</h1> <a href="#" class="btn btn-success">Info</a> <a href="#" class="btn btn-danger">Mehr</a>
        </div>
</div>

<!-- vor dem schließenden </body> einfügen -->
<script>
        $('.parallax-window').parallax();
</script>
CSS:
Code:
.parallax-window {
        min-height: 500px;
        background: transparent;
}
        
.window-wrapper {
        min-height: 500px;
         background: #fff;
}
        
.parallax-text {
         padding-top: 100px;
}



Angehängte Dateien
.rar   Boostrap Parallax.rar (Größe: 2,52 MB / Downloads: 1)
Drucke diesen Beitrag

Heart Bootstrap in WordPress einbinden
Geschrieben von: alhai - 28.12.2017, 18:26 - Forum: Bootstrap 3 - Antworten (1)

Hallo; ein paar Fragen zu Bootstrap!

kann man Bootstrap in jedes beliebige WordPress-Theme einbinden? Und wenn es eingebunden ist, damit entstehen weitere Gestaltungsoptionen! Aber wie sind diese nutzbar, im Backend von WP als Customizer-Funktionen oder muß man dann weiterhin in den CSS-Dateien ...... direkt die Anpassungen vornehmen?

Wer kann mir hier eine qualifizierte Auskunft geben, besten Dank.

Grüße
alias alhai

Drucke diesen Beitrag

  Sidebar auf anderer Seite anzeigen
Geschrieben von: Croonas - 20.12.2017, 11:00 - Forum: Bootstrap 3 - Antworten (2)

Hallo zusammen,

Ich hoffe, dass ihr mir helfen könnt. Ich komme da einfach nicht weiter.

Folgenden Code habe ich:

PHP-Code:
        <div class="container">
            <
div class="row">
                <
div class="col-md-8" id="content">
                    
Content
                
</div>
                <
div class="col-md-4" id="sidebar">
                    
Sidebar
                
</div>                
            </
div>
        </
div


Die Sidebar wird in diesem Beispiel rechts angezeigt bzw. auf mobilen Geräte wird diese dann unter dem Content gezeigt.
Wie bekomme ich es hin, dass auf einem grossen / PC Bildschirm die Sidebar links angezeigt wird obwohl diese im php Code nach dem Content steht. 

Der Code soll dann nicht so aussehen:

PHP-Code:
       <div class="container"
 
           <div class="row">
                <
div class="col-md-4" id="sidebar">
 
                   Sidebar
                
</div               
                
<div class="col-md-8" id="content">
 
                   Content
                
</div>
 
           </div>
 
       </div



Ich hoffe ihr könnt nachvollziehen was ich meine.

Die Lösung funktioniert glaube mit CSS. Auf einer Webseite habe ich es schon mal gesehen, finde aber diese nicht mehr.

Danke für Tipps und Anregungen.

Drucke diesen Beitrag

  Sidebar rechts fixieren
Geschrieben von: OnkelRana - 18.12.2017, 16:27 - Forum: Bootstrap 3 - Antworten (2)

Hallo
zum Glück habe ich dieses Forum gefunden!
Ich möchte eine Sidebar auf der rechten Seite fixieren, sodass sie immer sichtbar bleibt, auch wenn der Seiteninhalt gescrollt wird.
Für diese Sidebar bestimmt das CSS Hintergrundfarbe und einen Rahmen.
Auf dem Internet sind zahlreiche Anleitungen zu finden, doch geht es immer um eine Navigation, die fixiert wird. Sobald ich die Navigation durch einen einfachen Inhalt ersetze, klappt die Sache nicht mehr. Der Inhalt wird zu breit, die Formatierungen bewegen sich nach oben und verlieren somit ihren Sinn. In anderen Versuchen klappt alles wie gewünscht, ausser dass die Sidebar links positioniert ist und den Seiteninhalt verdeckt, selbst wenn ich in der class "pull-right" notiere.
Das alles ist für mich unverständlich. [Bild: huh.png]
Ich arbeite mit Dreamweaver CC 2018 in welchen Bootstrap v3.3.7 integriert ist.

Der Code für die Seite ist im Attachment, meine Versuche habe ich weggelassen.

Jeder Hinweis ist willkommen - vielen Dank sagt
OnkelRana



Angehängte Dateien
.html   fixierte_sidebar.html (Größe: 4,67 KB / Downloads: 3)
Drucke diesen Beitrag

  Nochmal Galerie
Geschrieben von: Emess - 14.12.2017, 21:45 - Forum: Bootstrap 3 - Antworten (9)

Gerade dacht ich was kapiert zu haben. Aber nix da.
Habe 7 Bilder in einer Lytebox. Bild 1-5 Hochkant 6+7 Landscape. Alle gleich groß aber angezeigt werden
1-5 Landscape obwohl sie als Hochkant abgespeichert sind. Ich kann mich da erst mal nur Wundern.
www.granitwerk-wilfert.de/galerie.html

Drucke diesen Beitrag

  Zwei Fehler sind mir noch aufgefallen
Geschrieben von: Emess - 11.12.2017, 22:22 - Forum: Bootstrap 3 - Antworten (2)

das Pulldown menue, vehält sich im Mobilmodus nicht wie es soll.
Ohne @TheError hätte ich das überhaupt nicht hin bekommen.
Die beste Beschreibung ist ein Link
http://www.granitwerk-wilferth.de


Und im Footer wäre es schön, wenn beim Verkleinern, die vier Spalten erst auf Zwei und im Mobilen Modus in eine Spalte springen würde.

Fall ich mich undeutlich ausgedrückt haben sollte liegt es wohl am Alkoholgenuss.

Sollte was an sonstigem Code gewünscht werden. Bitte nachfragen.

Drucke diesen Beitrag

  Bootstrap 4 Cards
Geschrieben von: The-Error - 11.12.2017, 14:48 - Forum: Bootstrap Snippet - Keine Antworten

Bootstrap 4 Cards

Boostrap Beta 2
Font Awesome Icons

[Bild: sreen.JPG]
HTML:

Code:
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--External Styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="css/font-awesome.min.css"> </head>
<style>
    .card {
        box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);
        border: 1 solid #ddd;
        margin-bottom: 30px;
    }
    
    .social-icons i {
        border: 1px solid #868e96;
        color: #868e96;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        line-height: 30px;
    }
    
    .social-icons i:hover {
        background: #bcbcbc;
        color: #fff;
    }
    
    .social-icons a {
        margin: 0 5px;
    }
    
    .btn-default {
        background: #868e96;
        color: #fff;
        font-weight: 700;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
        font-size: 14px;
    }
    
    .card a:hover {
        color: #5c5c5c;
    }
    
    .flipcard {
        position: relative;
    }
    
    .flipcard:hover .front,
    .flipcard.flip .front {
        transform: rotateY(180deg);
    }
    
    .flipcard:hover .back,
    .flipcard.flip .back {
        transform: rotateY(0deg);
    }
    
    .flipcard .back {
        transform: rotateY(-180deg);
    }
    
    .flipcard .front,
    .flipcard .back {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        transition: all 0.5s ease-in;
        backface-visibility: hidden;
    }
    
    .testimonial-card .avatar img {
        width: 100%;
    }
    
    .testimonial-card .card-up {
        overflow: hidden;
        height: 120px;
        border-radius: .3rem .3rem 0 0;
    }
    
    .testimonial-card .avatar {
        border-radius: 50%;
        height: 120px;
        width: 120px;
        margin: -65px auto 0;
        overflow: hidden;
        border: 5px solid #fff;
    }
    
    .rounded-circle {
        border-radius: 50% !important;
    }
</style>

<body>
    <div class="container">
        <h1 class="text-center">Bootstrap 4 Cards</h1>
        <hr>
        <div class="row">
            <!-- Einfache Card -->
            <div class="col-md-3">
                <h3 class="text-center mb-5">Einfache Card</h3>
                <div class="card"> <img class="card-img-top img-fluid" src="images/014-klein.jpg" alt="">
                    <div class="card-body">
                        <h4 class="card-title">Card Titel</h4>
                        <p class="card-text">Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <a href="#" class="btn btn-default text-uppercase">Details</a> </div>
                </div>
            </div>
            <!-- Card mit Slider -->
            <div class="col-md-3">
                <h3 class="text-center mb-5">Card mit Slider</h3>
                <div class="card">
                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner" role="listbox">
                            <div class="carousel-item active"> <img class="imd-block img-fluid" src="images/slider/001-klein.jpg"> </div>
                            <div class="carousel-item"> <img class="d-block img-fluid" src="images/slider/002-klein.jpg"> </div>
                            <div class="carousel-item"> <img class="d-block img-fluid" src="images/slider/003-klein.jpg" alt="Third slide"> </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
                        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                    </div>
                    <div class="card-body"> <span class="badge-box"></span>
                        <h4 class="card-title">Card Titel</h4>
                        <p class="card-text">Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <a href="#" class="btn btn-default text-uppercase">Details</a> </div>
                </div>
            </div>
            <!-- Profil Card -->
            <div class="col-md-3">
                <h3 class="text-center mb-5">Profil Card</h3>
                <div class="card">
                    <div class="profile-box bg-secondary"> <img class="card-img-top rounded-circle px-2 pt-2 pb-2" src="images/team/team1.jpg" alt="Card image cap"> </div>
                    <div class="card-body text-center">
                        <h4 class="card-title">Max Muster</h4>
                        <p class="card-text">Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <span class="social-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-google-plus"></i></a> </span> </div>
                </div>
            </div>
            <!-- Card mit Video -->
            <div class="col-md-3">
                <h3 class="text-center mb-5">Video Card</h3>
                <div class="card">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/i2zOLe0KGCo?iv_load_policy=3&controls=0&showinfo=0&rel=0&autoplay=1&loop=1"></iframe>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title">Card Titel</h4>
                        <p class="card-text">Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <a href="#" class="btn btn-default text-uppercase">Details</a> </div>
                </div>
            </div>
            <div class="col-md-3">
                <h3 class="text-center mb-5">Profil Card 2</h3>
                <div class="card testimonial-card">
                    <!--Background color-->
                    <div class="card-up bg-dark"> </div>
                    <!--Avatar-->
                    <div class="avatar"> <img src="images/team/team1.jpg" class="rounded-circle"> </div>
                    <div class="card-body text-center">
                        <!--Name-->
                        <h4 class="card-title">Max Muster</h4>
                        <hr>
                        <!--Social Media Icons-->
                        <p><i class="fa fa-quote-left"></i> Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <span class="social-icons text-center"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-google-plus"></i></a> </span> </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="flipcard">
                    <h3 class="text-center mb-5">Flip Card</h3>
                    <div class="front">
                        <div class="card"> <img class="card-img-top img-fluid" src="images/014-klein.jpg" alt="">
                            <div class="card-body">
                                <h4 class="card-title">Card Vorderseite</h4>
                                <p class="card-text"><i class="fa fa-quote-left"></i> Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <a href="#" class="btn btn-default text-uppercase">Details</a> </div>
                        </div>
                    </div>
                    <div class="back">
                        <div class="card"> <img class="card-img-top img-fluid" src="images/002-klein.jpg" alt="">
                            <div class="card-body">
                                <h4 class="card-title">Card Rückseite</h4>
                                <p class="card-text"><i class="fa fa-quote-left"></i> Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <a href="#" class="btn btn-default text-uppercase">Details</a> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

</html>



Angehängte Dateien
.rar   bootstrap-4 Cards.rar (Größe: 1,77 MB / Downloads: 2)
Drucke diesen Beitrag

Photo Masonry-Gallery mit Lightbox
Geschrieben von: The-Error - 08.12.2017, 02:09 - Forum: Bootstrap Snippet - Keine Antworten

Responsive Masonry-Gallery mit Lightbox

Einfache Gallery unter Verwendung des css Styles: column-count: Anzahl der Spalten;
Transition Hover Effekt
und der Lightbox by Lokesh Dhakar

[Bild: sreen.JPG]


CSS:

Code:
.galerie {
    -webkit-column-count: 5;
    /* Chrome, Safari, Opera */
    -moz-column-count: 5;
    /* Firefox */
    column-count: 5;
}

.galerie img {
    width: 100%;
    padding: 8px 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.galerie img:hover {
    -webkit-transform: scale(1.09);
    transform: scale(1.09);
}


/* Kleine Monitore */

@media only screen and (min-width: 300px) {
    .reframe {
        max-width: 500px
    }
    .galerie {
        -webkit-column-count: 2;
        /* Chrome, Safari, Opera */
        -moz-column-count: 2;
        /* Firefox */
        column-count: 2;
    }
}


/* Tabletts */

@media only screen and (min-width: 760px) {
    .reframe {
        max-width: 760px
    }
    .galerie {
        -webkit-column-count: 3;
        /* Chrome, Safari, Opera */
        -moz-column-count: 3;
        /* Firefox */
        column-count: 3;
    }
}


/* Mittlere Monitore */

@media only screen and (min-width: 980px) {
    .reframe {
        max-width: 980px
    }
    .galerie {
        -webkit-column-count: 4;
        /* Chrome, Safari, Opera */
        -moz-column-count: 4;
        /* Firefox */
        column-count: 4;
    }
}


/* Große Monitore */

@media only screen and (min-width: 1280px) {
    .reframe {
        max-width: 1280px
    }
    .galerie {
        -webkit-column-count: 5;
        /* Chrome, Safari, Opera */
        -moz-column-count: 5;
        /* Firefox */
        column-count: 5;
    }
}

HTML:
Code:
<div class="galerie">
           <a data-lightbox="irre-land" href="img/b.jpg" title="Bild 000"> <img src="img/001-klein.jpg" alt="Bild1" title="Bild1" /></a>
           ...
</div>



Angehängte Dateien
.rar   masonry-gallery.rar (Größe: 9 MB / Downloads: 4)
Drucke diesen Beitrag