I need to create a new application widget using bootstrap 3 and other web technologies like angular etc. I know that the new version of bootstrap is responsive. My understanding after reading the documentation is that the widget that I will create will automatically be responsive. I don't need to do anything special to make it responsive. However If I want to make it non-responsive then I need to make necessary changes to disable this functionality of bootstrap 3.
Can you please let me know that whether my understanding of Bootstrap in this regard is correct or not?
I think this will help you to understand more about Bootstrap.
You mentioned "widget that I will create will automatically be responsive". But if you not apply Bootstrap CSS rules in your widget, it will not be responsive even it in inside of Bootstrap template.
We have to apply Bootstrap CSS rules in our design to take effect and be responsive. If you do not want a particular element to be responsive, apply your own CSS rules or media queries on breaking points that you want...
Link for Bootstrap CSS http://getbootstrap.com/css/
Hope this will help you. Cheers! (='.'=)
This is all you need to do:
Steps to disable page responsiveness
Omit the viewport mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.
Bootstrap template with responsiveness disabled
We've applied these steps to an example. Read its source code to see the specific changes implemented.
Not Responsive Template: http://getbootstrap.com/examples/non-responsive/
Related
Could someone give me some insights about this.
Overriding Material UI CSS works in development environment,
but then it swapped in production environment.
This one is wrong, Material UI css should be at the bottom
This one is right, I'm overriding Material UI css.
I have just started using angular-gridster library and I am wondering how I can embed an html page in a widget. I mean, how can I 'point' towards an html resource which loads its data separately etc. etc.
For example, I would like to embed a chart of some sort in a widget with the purpose of creating a dashboard.
Thanks!
You can put an iframe element inside of a Gridster widget. From experience, my recommendation is to detect when the user begins resizing a widget with an embedded iframe, and temporarily set display: none on the iframe during the resize, otherwise the browser will have big problems. Once the resize is done, reveal the iframe again.
I have actually solved it using this answer: Widgets with different dynamic content (angular-gridster)
Slightly more complicated than just using an iframe, yes, but then again you have a better modularity - each widget will have its own directive and all that. Thank you emackey!
We're trying to serve simple markup - a thumbnail, image, and some text - through DFP. This markup needs to be fluid - it's one member of a responsive grid on our website.
Assuming we can't avoid the iframe, is there a way we can get the iframe to be set at 100% width? That would probably do it.
The issues we're having is that we're forced to define an ad unit size, and that seems to dictate the dimensions of the iframe.
You can't have the control over the iframe, the best solution would be to extract the content of the iframe and append it to the parent using javascript. This way you will be able to use your websites responsive grid and class.
Sorry Mathieu but you are wrong. DFP uses friendly iFrames and you can change the width or height if you use your own creative template. We have many custom templates defined in DFP for our masthead variations that can expand, collapse, destroy ad unit's iframe.
I am using Angularjs and bootstrap for my application. I have multiple sections in my page and each sections has multiple columns. I have used bootstrap grid to show the list of items for tablet and desktops ranges and used "row" for each of my sections and then col- class. Due to default bootstrap grid css, it shows one column display at mobile breakpoints for each sections.
However we want only at mobile breakpoint it should display work as accordion control.
I don't want to use css to hide the markup for tablets and desktop and show mobile markup for accordion. I want to use same markup for all of my breakpoints.
I have gone through the bootstrap accordion control also angular-ui project accordion control, however both require new HTML markup.
How can I use same bootstrap grid based markup to show accordion control at mobile breakpoints. Please also note; I tried to use ":target" css properties however it doesn't seems working fine with angular.
Please also note; I am using single page application and HTML5(true) router.
Please advice.
I was looking and found blog by Mary Lou which seems good solution to implement accordion using css only.
Accordion using CSS Only
CSS rollover sprites were cool, but for responsive design we now use images (which are responsive) rather than CSS backgrounds (which are not). Is there an equivalent to CSS sprites for responsive image-based links ? Or, is there only Javascript for switching from normal state image to hover state image when hovering the link ?
As I'm the developer of LazyLou, I can advise you to use it. It's support for responsive page design as well as pre-loading feature. It might help you.