mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Don't copy-pasta all the Sass docs because fuck keeping that up to date. Instead, point to https://github.com/twbs/bootstrap-sass/blob/master/README.md.
This commit is contained in:
Mark Otto
parent
c4b41ceae3
commit
edd0b97be5
@ -122,9 +122,6 @@
|
||||
<a href="#sass">Using Sass</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#sass-contents">What's included</a></li>
|
||||
<li><a href="#sass-installation-rails">Rails install</a></li>
|
||||
<li><a href="#sass-installation-compass">Compass install</a></li>
|
||||
<li><a href="#sass-installation-sass-only">Sass install</a></li>
|
||||
<li><a href="#sass-usage">Usage</a></li>
|
||||
<li><a href="#sass-installation">Rails install</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
153
docs/css.html
153
docs/css.html
@ -3334,153 +3334,8 @@ a {
|
||||
|
||||
|
||||
<h2 id="sass-installation">Installation</h2>
|
||||
<p>Use the appropriate guide for your environment of choice.</p>
|
||||
|
||||
<h3 id="sass-installation-rails">Rails</h3>
|
||||
|
||||
<p><code>bootstrap-sass</code> is easy to drop into Rails with the asset pipeline.</p>
|
||||
|
||||
<p>In your Gemfile you need to add the <code>bootstrap-sass</code> gem, and ensure that the <code>sass-rails</code> gem is present—it is added to new Rails applications by default.</p>
|
||||
|
||||
{% highlight ruby %}
|
||||
gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
|
||||
gem 'bootstrap-sass', '~> 3.0.3.0'
|
||||
{% endhighlight %}
|
||||
|
||||
<p><code>bundle install</code> and restart your server to make the files available through the pipeline.</p>
|
||||
|
||||
|
||||
<h3 id="sass-installation-compass">Compass <small>without Rails</small></h3>
|
||||
|
||||
<p>Install the gem:</p>
|
||||
|
||||
{% highlight bash %}
|
||||
gem install bootstrap-sass
|
||||
{% endhighlight %}
|
||||
|
||||
<p>If you have an existing Compass project:</p>
|
||||
|
||||
{% highlight ruby %}
|
||||
# config.rb:
|
||||
require 'bootstrap-sass'
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight bash %}
|
||||
bundle exec compass install bootstrap
|
||||
{% endhighlight %}
|
||||
|
||||
<p>If you are creating a new Compass project, you can generate it with <code>bootstrap-sass</code> support:</p>
|
||||
|
||||
{% highlight bash %}
|
||||
bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap
|
||||
{% endhighlight %}
|
||||
|
||||
<p>This will create a new Compass project with the following files in it:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="{{ site.sass_repo }}/blob/master/templates/project/_variables.scss.erb">_variables.scss</a> — all of bootstrap variables (override them here).
|
||||
</li>
|
||||
<li><a href="{{ site.sass_repo }}/blob/master/templates/project/styles.scss">styles.scss</a> — main project SCSS file, import `variables` and `bootstrap`.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 id="sass-installation-sass-only">Sass-only <small>without Compass or Rails</small></h3>
|
||||
|
||||
<p>Require the gem, and load paths and Sass helpers will be configured automatically:</p>
|
||||
|
||||
{% highlight ruby %}
|
||||
require 'bootstrap-sass'
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Using bootstrap-sass as a Bower package is still being tested. You can install it with:</p>
|
||||
|
||||
{% highlight bash %}
|
||||
bower install 'git://github.com/twbs/bootstrap-sass.git#v3.0.3.0'
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>JS and fonts</h4>
|
||||
|
||||
<p>If you are using Rails or Sprockets, see Usage. If none of Rails/Sprockets/Compass were detected the fonts will be referenced as:</p>
|
||||
|
||||
{% highlight sass %}
|
||||
"#{$icon-font-path}/#{$icon-font-name}.eot"
|
||||
{% endhighlight %}
|
||||
|
||||
<p><code>$icon-font-path</code> defaults to <code>bootstrap/</code>. When not using an asset pipeline, you have to copy fonts and javascripts from the gem.</p>
|
||||
|
||||
{% highlight bash %}
|
||||
mkdir public/fonts
|
||||
cp -r $(bundle show bootstrap-sass)/vendor/assets/fonts/ public/fonts/
|
||||
mkdir public/javascripts
|
||||
cp -r $(bundle show bootstrap-sass)/vendor/assets/javascripts/ public/javascripts/
|
||||
{% endhighlight %}
|
||||
|
||||
<p>In ruby you can get the assets' location in the filesystem like this:</p>
|
||||
|
||||
{% highlight ruby %}
|
||||
Bootstrap.stylesheets_path
|
||||
Bootstrap.fonts_path
|
||||
Bootstrap.javascripts_path
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="sass-usage">Usage</h2>
|
||||
|
||||
<h3 id="sass-usage-sass">Sass</h3>
|
||||
|
||||
<p>Import Bootstrap into a Sass file (for example, <code>application.css.scss</code>) to get all of Bootstrap's styles, mixins and variables! We recommend against using <code>//= require</code> directives, since none of your other stylesheets will be <a href="{{ site.sass_repo }}/issues/79#issuecomment-4428595">able to access</a> the Bootstrap mixins or variables.</p>
|
||||
|
||||
{% highlight sass %}
|
||||
@import "bootstrap";
|
||||
{% endhighlight %}
|
||||
|
||||
<p>You can also include optional Bootstrap theme:</p>
|
||||
|
||||
{% highlight sass %}
|
||||
@import "bootstrap/theme";
|
||||
{% endhighlight %}
|
||||
|
||||
<p>The full list of Bootstrap variables can be found <a href="../customize/#less-variables">in the Customizer</a>. You can override these by simply redefining the variable before the <code>@import</code> directive, e.g.:</p>
|
||||
|
||||
{% highlight sass %}
|
||||
$navbar-default-bg: #312312;
|
||||
$light-orange: #ff8c00;
|
||||
$navbar-default-color: $light-orange;
|
||||
|
||||
@import "bootstrap";
|
||||
{% endhighlight %}
|
||||
|
||||
<p>You can also import components explicitly. To start with a full list of modules copy this file from the gem:</p>
|
||||
|
||||
{% highlight bash %}
|
||||
# copy and prepend "bootstrap/" to the @import paths:
|
||||
sed 's/@import "/@import "bootstrap\//' \
|
||||
$(bundle show bootstrap-sass)/vendor/assets/stylesheets/bootstrap/bootstrap.scss > \
|
||||
app/assets/stylesheets/bootstrap-custom.scss
|
||||
{% endhighlight %}
|
||||
|
||||
<p>In your <code>application.sass</code>, replace <code>@import 'bootstrap'</code> with:</p>
|
||||
|
||||
{% highlight sass %}
|
||||
@import 'bootstrap-custom';
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Comment out any components you do not want from <code>bootstrap-custom</code>.</p>
|
||||
|
||||
<h3 id="sass-usage-js">JavaScript</h3>
|
||||
|
||||
<p>We have a helper that includes all Bootstrap javascripts. If you use Rails (or Sprockets separately), put this in your Javascript manifest (usually in <code>application.js</code>) to load the files in the [correct order](/vendor/assets/javascripts/bootstrap.js):</p>
|
||||
|
||||
{% highlight js %}
|
||||
// Loads all Bootstrap javascripts
|
||||
//= require bootstrap
|
||||
{% endhighlight %}
|
||||
|
||||
<p>You can also load individual modules, provided you also require any dependencies. You can check dependencies in the [Bootstrap JS documentation][jsdocs].</p>
|
||||
|
||||
{% highlight js %}
|
||||
//= require bootstrap/scrollspy
|
||||
//= require bootstrap/modal
|
||||
//= require bootstrap/dropdown
|
||||
{% endhighlight %}
|
||||
<p>For information on how to install and use Bootstrap for Sass, consult the <a href="{{ site.sass_repo }}">GitHub repository readme</a>. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.</p>
|
||||
<p>
|
||||
<a class="btn btn-lg btn-outline" href="{{ site.sass_repo }}">Bootstrap for Sass</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -26,7 +26,7 @@ title: Bootstrap
|
||||
<div class="col-sm-4">
|
||||
<img src="assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
|
||||
<h3>Preprocesors</h3>
|
||||
<p>In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, <a href="{{ page.base_url }}css#using-less">Less</a> and <a href="{{ page.base_url }}css#using-sass">Sass</a>.</p>
|
||||
<p>In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, <a href="{{ page.base_url }}css#less">Less</a> and <a href="{{ page.base_url }}css#sass">Sass</a>.</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user