diff --git a/_includes/nav-css.html b/_includes/nav-css.html index 55d46d8b59..1d875db4c7 100644 --- a/_includes/nav-css.html +++ b/_includes/nav-css.html @@ -117,3 +117,12 @@
We use the following media queries in our LESS files to create the key breakpoints in our grid system.
+We use the following media queries in our Less files to create the key breakpoints in our grid system.
{% highlight css %} /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ @@ -447,8 +447,8 @@ base_url: "../"In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.
+In addition to prebuilt grid classes for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.
Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
@@ -726,9 +726,9 @@ base_url: "../"...
{% endhighlight %} - +The typographic scale is based on two LESS variables in variables.less: @font-size-base
and @line-height-base
. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
The typographic scale is based on two Less variables in variables.less: @font-size-base
and @line-height-base
. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
<section>
should be wrapped as inline.
================================================== -->
Bootstrap's CSS is built on LESS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source LESS files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.
+Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.
Grid variables and mixins are covered within the Grid system section.
@@ -2870,7 +2870,7 @@ For example,<section>
should be wrapped as inline.
background-color: @brand-primary;
}
-// Reassigned variables in LESS
+// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
@@ -2903,7 +2903,7 @@ a {
}
}
{% endhighlight %}
- Note that the @link-color-hover
uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use darken
, lighten
, saturate
, and desaturate
.
Note that the @link-color-hover
uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken
, lighten
, saturate
, and desaturate
.
Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.
@@ -3303,3 +3303,166 @@ a { } {% endhighlight %}While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.
+ +Use the appropriate guide for your environment of choice.
+ + +bootstrap-sass
is easy to drop into Rails with the asset pipeline.
In your Gemfile you need to add the bootstrap-sass
gem, and ensure that the sass-rails
gem is present—it is added to new Rails applications by default.
bundle install
and restart your server to make the files available through the pipeline.
Install the gem:
+ +{% highlight bash %} +gem install bootstrap-sass +{% endhighlight %} + +If you have an existing Compass project:
+ +{% highlight ruby %} +# config.rb: +require 'bootstrap-sass' +{% endhighlight %} + +{% highlight bash %} +bundle exec compass install bootstrap +{% endhighlight %} + +If you are creating a new Compass project, you can generate it with bootstrap-sass
support:
This will create a new Compass project with the following files in it:
+ +Require the gem, and load paths and Sass helpers will be configured automatically:
+ +{% highlight ruby %} +require 'bootstrap-sass' +{% endhighlight %} + +Using bootstrap-sass as a Bower package is still being tested. You can install it with:
+ +{% highlight bash %} +bower install 'git://github.com/twbs/bootstrap-sass.git#v3.0.3.0' +{% endhighlight %} + +If you are using Rails or Sprockets, see Usage. If none of Rails/Sprockets/Compass were detected the fonts will be referenced as:
+ +{% highlight sass %} +"#{$icon-font-path}/#{$icon-font-name}.eot" +{% endhighlight %} + +$icon-font-path
defaults to bootstrap/
. When not using an asset pipeline, you have to copy fonts and javascripts from the gem.
In ruby you can get the assets' location in the filesystem like this:
+ +{% highlight ruby %} +Bootstrap.stylesheets_path +Bootstrap.fonts_path +Bootstrap.javascripts_path +{% endhighlight %} + + +Import Bootstrap into a Sass file (for example, application.css.scss
) to get all of Bootstrap's styles, mixins and variables! We recommend against using //= require
directives, since none of your other stylesheets will be able to access the Bootstrap mixins or variables.
You can also include optional Bootstrap theme:
+ +{% highlight sass %} +@import "bootstrap/theme"; +{% endhighlight %} + +The full list of Bootstrap variables can be found in the Customizer. You can override these by simply redefining the variable before the @import
directive, e.g.:
You can also import components explicitly. To start with a full list of modules copy this file from the gem:
+ +{% highlight bash %} +cp $(bundle show bootstrap-sass)/vendor/assets/stylesheets/bootstrap/bootstrap.scss \ + app/assets/stylesheets/bootstrap-custom.scss +{% endhighlight %} + +In your application.sass
, replace @import 'bootstrap'
with:
Comment out any modules you don't need from bootstrap-custom
.
We have a helper that includes all Bootstrap javascripts. If you use Rails (or Sprockets separately), put this in your Javascript manifest (usually in application.js
) to load the files in the [correct order](/vendor/assets/javascripts/bootstrap.js):
You can also load individual modules, provided you also require any dependencies. You can check dependencies in the [Bootstrap JS documentation][jsdocs].
+ +{% highlight js %} +//= require bootstrap/scrollspy +//= require bootstrap/modal +//= require bootstrap/dropdown +{% endhighlight %} + + +