bootstrap examples with many pages

Just starting out? Need help? Post your questions and find answers here.
Post Reply
ebelouet
Posts: 21
Joined: Mon Apr 08, 2019 9:46 am

bootstrap examples with many pages

Post by ebelouet »

Hi,

I search a example with bootstrap and show many pages or ancrs in same windows ?

Sincerely
Eric
Top
ebelouet
Posts: 21
Joined: Mon Apr 08, 2019 9:46 am

Re: bootstrap examples with many pages

Post by ebelouet »

here is exemple what we have nothing when we are click on menu, where is mistake ?

Code: Select all

Procedure AppendBody(content.s)
    !$("body").append(v_content);
EndProcedure

Procedure Main()
  AppendBody( ""+
  "<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossorigin='anonymous'>"+
  "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>"+            
  "<ul class='nav nav-tabs' id='myTab' role='tablist'><li class='nav-item'>"+
                    " <a class='nav-link active' id='home-tab' Data-toggle='tab' href='#home' role='tab' aria-controls='home' aria-selected='true'>Home</a></li>"+
                    "<li class='nav-item'>"+
                    "<a class='nav-link' id='profile-tab' Data-toggle='tab' href='#profile' role='tab' aria-controls='profile' aria-selected='false'>Profile</a></li>"+
                    "<li class='nav-item'>"+
                    " <a class='nav-link' id='contact-tab' Data-toggle='tab' href='#contact' role='tab' aria-controls='contact' aria-selected='false'>Contact</a></li></ul>"+
                    "<div class='tab-content' id='myTabContent'> "+
                    "<div class='tab-pane fade show active' id='home' role='tabpanel' aria-labelledby='home-tab'><p>eric.</p></div>"+
        "<div class='tab-pane fade' id='profile' role='tabpanel' aria-labelledby='profile-tab'><p>belouet.</p></div>"+
                    " <div class='tab-pane fade' id='contact' role='tabpanel' aria-labelledby='contact-tab'><p>ragnyi.</p></div></div>")
   
   
EndProcedure

Procedure BootstrapMain(URL$, Success)
    If Success : Main() : Else : Debug "Error while loading: "+URL$ : EndIf
EndProcedure

Procedure LoadBootstrapCSS(URL$, Success)
    If Success
        LoadScript("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js", @BootstrapMain())
    Else
        Debug "Error while loading: "+URL$
    EndIf
EndProcedure

LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css", @LoadBootstrapCSS(),#PB_Script_CSS)
// Edit: Code tags added. (Peter)
Top
User avatar
Peter
Posts: 1093
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:
Contact Peter

Re: bootstrap examples with many pages

Post by Peter »

ebelouet wrote:here is exemple what we have nothing when we are click on menu, where is mistake ?
What should happen when you click on a menu item?
Top
ebelouet
Posts: 21
Joined: Mon Apr 08, 2019 9:46 am

Re: bootstrap examples with many pages

Post by ebelouet »

it should writing a text so i can sending html example of this if you want ?
Top
ebelouet
Posts: 21
Joined: Mon Apr 08, 2019 9:46 am

Re: bootstrap examples with many pages

Post by ebelouet »

html example

Code: Select all

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
 
    
</head>

<body>
    <a class="btn btn-primary" href="http://www.ebconnections.com" role="button">Ebconnectionsk</a>
    
<a class="btn btn-primary" href="#home" role="button">home</a>
<a class="btn btn-primary" href="#eric" role="button">eric</a>
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">


<div class="tab-content">
    <div id="home"  class="container tab-pane active"><br>
      <h3>Info</h3>
      <p>home.</p>
     </div>
     <div id="eric"  class="container tab-pane fade"><br>
      <h3>eric</h3>
      <p>Test menu info eric.</p>
     </div>
</div>
</div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    
    <!-- Insérer cette balise "link" après celle de Bootstrap -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">

<!-- Insérer cette balise "script" après celle de Bootstrap -->
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>   
</body>

</html>
// Edit: Code tags added. @ebelouet: Please use the appropriate code tags in your postings (Peter)
Top
User avatar
Peter
Posts: 1093
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:
Contact Peter

Re: bootstrap examples with many pages

Post by Peter »

With reference to this posting: viewtopic.php?p=7098#p7098

Code: Select all

Procedure AppendBody(content.s)
  !$("body").append(v_content);
EndProcedure

Procedure Main()
  
  AppendBody("<div>" + 
             "  <nav>" + 
             "    <div class='nav nav-tabs' id='nav-tab' role='tablist'>" + 
             "      <a class='nav-item nav-link active show' id='nav-home-tab' data-toggle='tab' href='#nav-home' role='tab' aria-controls='nav-home' aria-selected='true'>Home</a>" + 
             "      <a class='nav-item nav-link' id='nav-profile-tab' data-toggle='tab' href='#nav-profile' role='tab' aria-controls='nav-profile' aria-selected='false'>Profile</a>" + 
             "      <a class='nav-item nav-link' id='nav-contact-tab' data-toggle='tab' href='#nav-contact' role='tab' aria-controls='nav-contact' aria-selected='false'>Contact</a>" + 
             "    </div> " + 
             "  </nav>" + 
             "  <div class='tab-content' id='nav-tabContent'>" + 
             "    <div class='tab-pane fade active show' id='nav-home' role='tabpanel' aria-labelledby='nav-home-tab'>" + 
             "      <p>Home</p>" + 
             "    </div>" + 
             "    <div class='tab-pane fade' id='nav-profile' role='tabpanel' aria-labelledby='nav-profile-tab'>" + 
             "      <p>Profile</p>" + 
             "    </div>" + 
             "    <div class='tab-pane fade' id='nav-contact' role='tabpanel' aria-labelledby='nav-contact-tab'>" + 
             "      <p>Contact</p>" + 
             "    </div> " + 
             "  </div>" + 
             "</div>")
  
EndProcedure


! $("<link rel='stylesheet' type='text/css'>").attr("href", "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css").appendTo("head");

! require(["https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"], function() {
Main()
! });
Top
ebelouet
Posts: 21
Joined: Mon Apr 08, 2019 9:46 am

Re: bootstrap examples with many pages

Post by ebelouet »

HI,

thank you very much, it's work very well now.
I have another question, do you think that it's possible to put this example in full windows as same navigator function F11 ?

Sincerely
Eric
Top
Post Reply

Return to “Coding Questions”