I have previously used bootstrap 3 css only with angular 2 for an application which did not require jquery dependent bootstrap components like modal, carousel etc.
I am now considering using bootstrap 4 with Angular 2 and have looked through bootstrap 4 documentation, but still confused on what components depend on jquery and/or tether.js and what components work if I include css alone. Any help will be appreciated!
Current Alpha (6) has 3 sets of CSS.
bootstrap-reboot - defines only Html standard tags
bootstrap-grid - defines the mobile-firt grid system, e.g. .container & .col-x-x
bootstrap - full version
Generally speaking, the first two above will not require the JS dependencies.
If you want to dig deeper then a quick look at the bootstrap.scss source has the JS dependant items listed separately. Thus, the non-JS dependent components are:
Core CSS
reboot
type
images
code
grid
tables
forms
buttons
Components
transitions
dropdown
button-group
input-group
custom-forms
nav
navbar
card
breadcrumb
pagination
badge
jumbotron
alert
progress
media
list-group
responsive-embed
close
Other
print
Alternately, as of 4.4, the only components that require JavaScript are
Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper.js)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Scrollspy for scroll behavior and navigation updates
Related
I just started exploring vuetify. All the vuetify componets resides in <v-app>.
I wanted to create menu for my site so in documentation I found <v-app-bar> and <v-toolbar>
I am confused that if I should keep menu items inside <v-app-bar> or <v-toolbar> as offical documentation says
About <v-app-bar> https://vuetifyjs.com/en/components/app-bars
The v-app-bar component is pivotal to any graphical user interface
(GUI), as it generally is the primary source of site navigation. The
app-bar component works great in conjunction with a
v-navigation-drawer for providing site navigation in your application.
About <v-toolbar> https://vuetifyjs.com/en/components/toolbars
The v-toolbar component is pivotal to any gui, as it generally is the
primary source of site navigation. The toolbar component works great
in conjunction with v-navigation-drawer and v-card.
Both the description are almost same. What is difference in both and when we should use what? or we should use v-toolbar inside v-app-bar?
Per the Vuetify Migration Guide -- 'Migrating from v1.5.x to v2.0.x':
v-toolbar: All existing scrolling techniques and app functionality
has been deprecated and moved to v-app-bar.
Thus, starting in Vuetify 2.0, v-app-bar is what you probably want to use at the top of most typical apps since you can do scrolling-related effects and designate v-app-bar as a unique 'top level' application component using the app prop.
On the other hand, v-toolbar could be used for other 'subordinate' cases where scrolling should definitely not affect the toolbar, perhaps if v-toolbar is being used as part of a in-screen widget.
Actually v-app-bar extends v-toolbar to give you additional properties that you can use.
These properties give you far more granular control over the overall layout of the toolbar and how it responds to sizing and content changes in the surrounding space.
You can look at the properties of each and see how the v-app-bar has a dozen or more additional properties that you can leverage to customize the functionality and design of it, whereas the toolbar is opinionated about its purpose and limits those functionalities.
Why does my navbar jump a little to the right when a drop-down is selected? Looks like some padding is missing on :hover perhaps. Any help would be appreciated. Thanks
http://www.85widening.com/default.html
It has to do with Bootstrap hiding the vertical scrollbar on body when the modal opens. It occurs only when you have a fixed navbar and body/modal content that require vertical scrolling.
Based on what I recall and found, it's a bug with Bootstrap 3 that I don't believe was ever resolved based on this GitHub issue.
Most workarounds seem to involve JS to add padding-right (like 15px) to the navbar when the modal opens or to override the overflow: hidden property the modal-open class that Bootstrap adds to body when you open a modal. The downside of this is you will have two vertical scroll bars (ugly). Either add the workaround or remove the fixed navbar. I haven't moved on to Bootstrap 4 yet but maybe they've addressed this.
i want to know if it's possible with bootstrap, to create the header with the logo and others informations, and then the navigation bar.
But the logo won't be fixe, only the navagation bar will be when it will be at the top of the page.
Here an example of header i'm trying to do with bootstrap
This partly depends on what you mean by "Header".
Often the "jumbotron" class is used as a header like this:
<div class="jumbotron"><img src='logo.png'>My Cool Company</div>
And the navigation bar is an independent element, specifically a navbar. It can be fixed on the page (scrolls with content) or Static on the screen (stays at the top or bottom)
Nabber example (always at the top):
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
Link 1
Link 2
</nav>
You can find the other details on the Bootstrap page for Navbar:
Bootstrap Components navbar Placement
And the placement in this example is "navbar-fixed-top" so that it stays at the top of the screen, even when scrolling.
You may also want the navigation under the header, and want both to scroll until the navbar hits the top of the screen where it would then be fixed at the the top. This is sometimes called a sticky navbar. It can be done with jQuery, but at this time, I don't know of a way in Bootstrap without adding custom javascript.
Sticky Menu in jQuery - answer
If you do want the second option, without jQuery, ask another question on how to use Javascript switch from Fixed to Static when scrolling past the top of the screen.
thank you for your answer, but i think it s not my question, and i think my solution is not related to jumbotron.
if you look at the link i have give below, you can see that the logo of the site (w3school.com) is on the top when we are on the top of the page.
when we scrool down, this logo will disapear and only the nav bar (home, html, css, ...) will stay at the top.
I recently retrofitted bootstrap 3 carousels to my site and added swipe gesture support using jquery mobile swiperight and swipeleft. Like this:
How to make Bootstrap carousel slider use mobile left/right swipe
This works fine, however, the functionality isn't quite what I needed.
Previously I was using swipe.js which provided more of a drag and swipe mechanic. If you place your finger on the image in the carousel and then drag it left or right the image follows the movement instantly. This feels more natural and responsive than the jquery mobile swipe implementation.
I like using bootstrap carousel and swipe.js seems to be more than just a gesture library, it really provides some carousel functionality, so combining the two doesn't seem like an easy fit.
Is anyone aware of a plugin or an appropriate that brings swipe.js like functionality to bootstrap carousel?
I was looking for a solution to this problem recently and settled on this plugin: http://ixisio.github.io/bootstrap-touch-carousel/
It's relatively light weight and is written specifically for bootstrap. The only downside is that it requires hammer.js which adds some extra weight, but this isn't a big deal.
This is not a coding question but rather a quick stop for directions.
I am looking into using Bootstrap framework for my next project. Bootstrap 3 official site has a great selection of default templates, but it seems to me they all have the same flaw -- I'll explain below.
One of the best responsive design features if a combination of JS and CSS media queries to take a regular, across the top, navigation and turn it into a hidden (on click) expand/collapse menus. This is great, BUT, all of the examples simply drop the menu links below each other and while it looks OK on a phone, it looks a bit ridiculous when a link with a single word, for example "About", is placed in a div of its own 768px wide.
A much nicer solution is to have that left or right sliding menu bar that pushes or overlaps the content of the site. Unfortunately there are not too menu of such examples, or at least I was not able to locate them.
This is where I need some help -- any basic templates with preferably right side menu on for smaller viewport browsers?
Here's an example right off-canvas navbar that may work for you...
Most of the off-canvas examples I've found push a sidebar off-canvas, but the top navbar is still collapsed into the usual vertical nav.
However, this example adjusts the navbar into a sliding right sidebar on smaller devices:
https://codeply.com/p/KDMFdhc6c8 (Bootstrap 3.x)
You could also consider switching over to Foundation (I've use bootstrap and foundation frameworks for several years and bout area great, one usually fits a project better than the other, depending on the needs).. Foundation has a native off-canvas component and it works very well (both left and right side off-canvas is available!)
foundation.zurb.com/docs/components/offcanvas.html