I downloaded a customized version of bootstrap 3 from the web (I changed the number of columns to 7), but my website uses zf2 which comes packaged with bootstrap 3. How can I have a page of my website use this customized version and have the rest of the site use the standard build?
Will I have to do something with LESS? I'm just unsure of how this would work or if it can work at all.
I tagged this with zf2 because that is my specific use case, but this is more a general boostrap, css question.
If you only want ONE page to use it, why not just output the customized Bootstrap CSS files on that one page, and the standard CSS files on everything else?
No, since both versions of bootstrap use the same class names, you can not use multiple instances of bootstrap on the same page.
Related
I'm trying to figure out whether it would pay off to use Bootstrap on my existing Wordpress site and while researching it, I came up with the idea that the template I'm using might actually already be using Bootstrap.
I can't see any signs of Bootstrap in my functions.php file or through the FTP, but the template is using classes like these: ".col-md-4", ".col-sm-4". Is that because it was created with Bootstrap or is it just a convention?
Sorry if this is complete nonsense.
That's a classic bootstrap class.
You shouldn't check the PHP files but the css ones or javascript.
It may be a sign.
You can check more bootstrap classes Like container, row, and ...
And for being sure you can check asset files like CSS and JS files, if you found bootstrap css and js files you may be sure of using bootstrap in your template.
You can open asset files it may wrote the bootstrap version in it even.
I'm set with the migration of several Wordpress themes that use Bootstrap 2.3.2. The choice is to use 3.3.7.
First off, I checked that there are no custom div IDs or classes used in the theme.
I then replaced the 2.3.2 CSS/JS Bootstrap files with the 3.3.7 equivalent files.
The layout was a mess as a result. Images are no longer responsive, and there is obvious viewport overflow in different devices.
I have already noticed that the Wordpress posts and pages use HTML elements with Bootstrap styling directly applied.
Does anyone here have experience with this kind of large scale task? What workflow did you apply to migrate Wordpres themes with Bootstrap from 2.3.2 to 3.3.7 quickly?**
I do not need to change the look and feel.
Have you looked at the migration document here? the migration document highlights all changes to classes and what you need to do. There are also online tools like this one and this tool which you can try.
Im developing a custom html / css / js front end from scratch, ie. all the elements are designed and i dont need a front end framework with buttons, headers, layouts etc.
What i do need however is a responsive scaffolding grid (i know i could write this from scratch but why reinvent the wheel) Id like to use bootstraps scaffolding grid system as im familiar with it from other projects ive worked on (where i was using the frameworks design elements).
Is there a simple way to do this, without overriding the css of every element in my custom-styles.css file ?
Download the LESS or SASS source, and compile only the areas you want to include in your project.
Made this Grunt build with only the Bootstrap 3.3.5 grid:
https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid
~10KB minimized.
If you need some other parts from Bootstrap just include them in /src/less/bootstrap.less.
You can use the customize option here
http://getbootstrap.com/customize/
Select just scafolding and responsive utilities.
You might have to change some more stuff because the normalizing css is still included
Is it possible to implement 100% of bootstrap in joomla without any custom css?
There's this great article about building a theme with Twitter Bootstrap.
http://magazine.joomla.org/issues/issue-aug-2012/item/818-using-the-twitter-bootstrap-framework-to-build-a-responsive-joomla-template-from-scratch
If you are building a new site. Take a look at Joomla 3.0 as it comes with Bootstrap by default (as well as jQuery).
Sure, you can implement Bootstrap without adding any custom CSS< but why would you do that? Bootstrap is not a full blown template or layout. It is a framework used to facilitate creating a template or layout. Even on the Bootstrap examples page they specify that these should be a starting point, not the end product.
http://twitter.github.com/bootstrap/getting-started.html#examples
If you want to create a custom template, it would make sense to start with the started Bootstrap template, adapt it for Joomla, then add the custom CSS and images to make it look good.
It would be a good idea to also look at Joostrap (http://www.joostrap.com/). They have a very nice basic template that we base all of our custom work on.
I have built some templates for Joomla 3.0, Bootstrap in Joomla 3.0 doesn't support all Glyphicons that Twitter Bootstrap supports, so if you want to use the missing icons you will need to add your custom CSS.
If you build a responsive template for Joomla 2.5, there will be a lot of works to do, not only for CSS, default extensions in Joomla 2.5 are not responsive so you may need to override their default layouts.
I've started a Rails project and implemented bootstrap-sass into it. A short time later I found a theme/template using a different version of twitter bootstrap. I've added the template to the app but the view doesn't align perfectly as was intended. I then added the specific assets that came with the theme/template to my project (such as jquery version, ANOTHER older bootstrap version) and the result is almost perfect. However, there are still some alignment issues. When I inspect the CSS I can see it's happening because of conflicts between the two versions of bootstrap.
I'm thinking I should make it so that this template only uses the version of twitter bootstrap that came with it. If so, how do I do this? How do I make it so that a rails view will only use a certain css stylesheet and not read from others?
(If this is not the best solution, what are some alternatives I should consider?)
Thanks
Try this out:
1) use 2 layouts (application.html.erb and new_application.html.erb)
2) have two master javascript/css file (application.js and new_application.js, application.css and new_application.css)
3) inside your application.html.erb include the first application.js and application.css, on your second layout, import the new application js and css
4) for the specific parts of your page, on the controlle inherit from the right parent controller for whichever layout you want.
class NewBootstrapController < ActionController::Base
layout 'new_application'
end
class OldBootstrapController < ActionController::Base
layout 'application'
end
Best practice is to try to view your project as consisting of "components" rather than pages. So focus on keeping the styling for your components up-to-date and consistent.
So rather than coding for individual pages, which doesn't scale and is difficult to maintain even with small(ish) projects, look for ways to turn elements into reusable components. Bootstrap is this way by default, so if there are certain components you use more than others, make those the priority for refactoring, and then look for repeating patterns across your pages and try to think about how you can create semantic, component-based classes to describe them.
Instead of this:
.sidebar-home {}
Try this:
.sidebar-narrow {} // or whatever describes your element
The operative point here is that if you will ever work on more than this project, get into the good habit of thinking about your CSS/HTML as consisting of components, and you will be able to reuse code and become much faster at identifying patterns in your UI.