Skip to main content
D
DomiBETEP
Participant
April 6, 2021
Question

bootstrap Tabs

  • April 6, 2021
  • 4 replies
  • 591 views

Hello,
I am new to Dreamweaver.
If I add a container with Bootstrap and then add a Bootstrap tab in this container, it should work that I can switch between these tabs in the live view, right?
I could change the content of the tab via the code, but that's not how Dreamweaver should work.

Thanks

This topic has been closed for replies.

4 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
April 7, 2021
quote

Hello,
I am new to Dreamweaver.
If I add a container with Bootstrap and then add a Bootstrap tab in this container, it should work that I can switch between these tabs in the live view, right?
I could change the content of the tab via the code, but that's not how Dreamweaver should work.

Thanks


By @DomiBETEP

 

I think that you are correct, that is not how a modern paid for IDE should work.

1. Design view should allow you to change the content.

2, Live view should allow you to test the app as you would in a browser..

 

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 6, 2021

Hi @DomiBETEP,

From Dreamweaver's Live View mode, use Ctrl + Click to open tabs.

 

That said, Dreameaver is not a browser.  It's web authoring software. 

  • Code View is for working with code. 
  • Design View is for quick text editing. 
  • Live View is for checking layout and styles. 

But previewing your pages in REAL browsers and mobile devices (F12) is essential because that's how people will access your site.

 

Nancy O'Shea— Product User & Community Expert
B
Community Expert
Ben MCommunity Expert
Community Expert
April 6, 2021

What is happening in Live View?  Are you not seeing the tabs at all?  If you could show screenshots or post a sample page that would help the most.

 

Also - to say editing code is not how DW should work is a false statement.  Dreamweaver is at its core a text editor to edit code.  So DW should work that way as well.  If it doesn't then something is really wrong.  The live view is meant to be a way to display dynamically-driven sites that was previously unavailable in the Design View layout which couldn't do things like query a database to display your site.

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
April 6, 2021

To start with, in Bootstrap, content can only be placed in columns for it to function properly. The following is a screen shot from one of my videos:

 

As for the question, please show the code so that we can see where it has gone wrong.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    D
    DomiBETEPAuthor
    Participant
    April 7, 2021

    Hello, i mean these Tab´s.

    Thank u for your support!

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap-4.4.1.css" rel="stylesheet">

    </head>
    <body>

    <!-- body code goes here -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.4.1.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap-4.4.1.js"></script>

    <div class="container"></div>
    <div class="container-fluid">
    <ul id="clothingnav1" class="nav nav-tabs" role="tablist">
    <li class="nav-item"> <a class="nav-link active" href="#home1" id="hometab1" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Tab 1</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#paneTwo1" role="tab" id="hatstab1" data-toggle="tab" aria-controls="hats">Tab 2</a> </li>
    <!-- Dropdown -->
    <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <em><strong> Tab 3 Dropdown </strong></em></a>
    <div class="dropdown-menu"> <a class="dropdown-item" href="#tabDropDownOne1" role="tab" id="dropdownshoestab1" data-toggle="tab" aria-controls="dropdownShoes">Dropdown Link 1</a> <a class="dropdown-item" href="#tabDropDownTwo1" role="tab" id="dropdownbootstab1" data-toggle="tab" aria-controls="dropdownBoots">Dropdown Link 2</a> </div>
    </li>
    </ul>
    <!-- Content Panel -->
    <div id="clothingnavcontent1" class="tab-content">
    <div role="tabpanel" class="tab-pane fade show active" id="home1" aria-labelledby="hometab1">
    <p>Content in <b>Tab Panel 1</b></p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="paneTwo1" aria-labelledby="hatstab1">
    <p>Content 2</p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tabDropDownOne1" aria-labelledby="dropdownshoestab1">
    <p>Dropdown content#1</p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tabDropDownTwo1" aria-labelledby="dropdownbootstab1">
    <p>Dropdown content#2</p>
    </div>
    </div>
    </div>
    </body>
    </html>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices