bootstrap Tabs

New Here ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

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

TOPICS
Bootstrap

Views

228

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 06, 2021 Apr 06, 2021

Copy link to clipboard

Copied

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:

BenPleysier_1-1617694824885.png

 

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

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 07, 2021 Apr 07, 2021

Copy link to clipboard

Copied

Hello, i mean these Tab´s.

Thank u for your support!

 

 

Bild_2021-04-07_175150.png

<!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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 06, 2021 Apr 06, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 06, 2021 Apr 06, 2021

Copy link to clipboard

Copied

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. 

Document ToolbarDocument Toolbar

  • 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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 07, 2021 Apr 07, 2021

Copy link to clipboard

Copied

LATEST
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.

BenPleysier_0-1617838121996.png

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

BenPleysier_1-1617838205708.png

 

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines