bootstrap-sass

repository·master·Indexed 11 days ago

A Sass-powered version of Bootstrap 3 (version 3.4.3) designed for integration into Sass-based applications via npm, Bower, or Ruby on Rails gems. It includes the full Bootstrap 3 framework with support for Sass variables, mixins, and JavaScript plugins such as Modals, Carousels, and Tooltips, requiring jQuery 1.9.1 up to (but not including) version 4.

Tokens: 5.1K
Snippets: 24
Records: 31
Agent score: 96%

What's inside bootstrap-sass

Import Bootstrap fonts and path helpers
master
Bootstrap fonts are referenced using the pattern: "#{$icon-font-path}#{$icon-font-name}.eot".
When using bootstrap-sass with Compass, Sprockets, or Mincer, you must import the relevant path helpers before importing Bootstrap itself:
```
@import "bootstrap-compass";
@import "bootstrap";
```
https://github.com/twbs/bootstrap-sass/blob/master/README.md
Install bootstrap-sass in Ruby on Rails
master
To use bootstrap-sass in a Rails application with the asset pipeline, add the gem to your Gemfile and ensure sassc-rails is present.
Steps:
1. Update Gemfile:
  gem 'bootstrap-sass', '~> 3.4.1' gem 'sassc-rails', '>= 2.1.0'
2. Run bundle install and restart your server.
3. Import styles in app/assets/stylesheets/application.scss. Note: You must import bootstrap-sprockets before bootstrap for icon fonts to work.
  @import "bootstrap-sprockets"; @import "bootstrap";
4. Ensure your main stylesheet has a .scss or .sass extension. If it is .css, rename it and remove all *= require statements, replacing them with @import to ensure access to Bootstrap mixins and variables.
5. For Bootstrap JavaScript, add jquery-rails to your Gemfile if using Rails 5.1+.
6. Require JavaScript in app/assets/javascripts/application.js:
  //= require jquery //= require bootstrap-sprockets
  Warning: Do not include both bootstrap-sprockets and bootstrap in application.js.
```
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
```
https://github.com/twbs/bootstrap-sass/blob/master/README.md
Install bootstrap-sass via Bower or npm
master
Bower
Install the package using Bower:
```
$ bower install bootstrap-sass
```
Compatible with node-sass 3.2.0+.
npm / Node.js
Install the package using npm:
```
$ npm install bootstrap-sass
```
https://github.com/twbs/bootstrap-sass/blob/master/README.md

Configure Rails to use bootstrap-sass via Bower

master

If you are using the Bower version of bootstrap-sass within a Rails application, add the following configuration to config/application.rb to set up asset paths, precompile fonts, and set the required Sass number precision:

# Bower asset paths
root.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path|
  config.sass.load_paths << bower_path
  config.assets.paths << bower_path
end

# Precompile Bootstrap fonts
config.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff2?)$

# Minimum Sass number precision required by bootstrap-sass
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max

Then, update your imports:

In application.scss:

$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass/assets/stylesheets/bootstrap";

In application.js:

//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets

# Bower asset paths
root.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path|
  config.sass.load_paths << bower_path
  config.assets.paths << bower_path
end
# Precompile Bootstrap fonts
config.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff2?)$
# Minimum Sass number precision required by bootstrap-sass
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max

Configure Sass number precision
master
bootstrap-sass requires a minimum Sass number precision of 8 (the default is often 5).
If you are using the npm or Bower version with Ruby, you must set this manually:
```
::Sass::Script::Value::Number.precision = [8, ::Sas::Script::Value::Number.precision].max
```
Note: When using the sassc-rails gem in Ruby, this is handled automatically.
```
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
```
https://github.com/twbs/bootstrap-sass/blob/master/README.md
Configure Autoprefixer for Bootstrap compatibility
master
To match the browser compatibility of upstream Bootstrap, configure your Autoprefixer browsers option with the following list:
```
[
  "Android 2.3",
  "Android >= 4",
  "Chrome >= 20",
  "Firefox >= 24",
  "Explorer >= 8",
  "iOS >= 6",
  "Opera >= 12",
  "Safari >= 6"
]
```
https://github.com/twbs/bootstrap-sass/blob/master/README.md
Requirements for Bootstrap JavaScript
master
Bootstrap's JavaScript components require jQuery to function.
Supported jQuery versions:
- Must be version 1.9.1 or higher.
- Must be lower than version 4.
If jQuery is undefined or falls outside this range, the script will throw an error.
https://github.com/twbs/bootstrap-sass/blob/master/assets/javascripts/bootstrap.js
Integrate bootstrap-sass with Ruby on Rails
master
The bootstrap-sass gem includes a Rails engine that automatically configures asset paths for stylesheets, javascripts, fonts, and images.
If you are using an older version of sprockets-rails (version < 3), the engine manually adds a precompile rule for Glyphicons to ensure font assets are correctly processed: bootstrap/glyphicons-halflings-regular.(?:eot|svg|ttf|woff2?)$.
https://github.com/twbs/bootstrap-sass/blob/master/lib/bootstrap-sass/engine.rb
Customize Bootstrap via Sass variables
master
You can override Bootstrap variables by redefining them before the @import directive.
Example:
```
$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";
```
To perform a partial import (only specific components), copy the assets/stylesheets/_bootstrap.scss file to your assets as _bootstrap-custom.scss, comment out the components you don't want, and import that file instead:
```
@import "bootstrap-custom";
```
https://github.com/twbs/bootstrap-sass/blob/master/README.md
Use Bootstrap JavaScript modules
master
If you are using Sprockets or Mincer, you can load the full concatenated Bootstrap JavaScript file:
```
//= require bootstrap-sprockets
```
Alternatively, you can load individual modules to reduce file size, provided you also include their dependencies:
```
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown
```
https://github.com/twbs/bootstrap-sass/blob/master/README.md

Configure Tooltip options

master

The following options are available for the Tooltip component:

Option	Type	Default	Description
`animation`	boolean	`true`	Whether to use CSS transitions
`placement`	string/function	`'top'`	Where to position the tooltip
`selector`	string	`false`	Selector for delegated tooltips
`template`	string	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	The HTML template for the tooltip
`trigger`	string	`'hover focus'`	Trigger(s) for showing the tooltip
`title`	string/function	`''`	The text or HTML to display
`delay`	number/object	`0`	Delay in ms (can be `{show: n, hide: n}`)
`html`	boolean	`false`	Whether to allow HTML in the title
`container`	string/jQuery	`false`	Where to append the tooltip
`viewport`	object	`{selector: 'body', padding: 0}`	The container for boundary detection
`sanitize`	boolean	`true`	Whether to sanitize HTML content
`sanitizeFn`	function	`null`	Custom sanitization function
`whiteList`	object	`DefaultWhitelist`	Custom whitelist for sanitization

Configure Popover options
master
The Popover component inherits all Tooltip.DEFAULTS and adds the following:
Option Type Default Description
content string/function '' The content to display in the popover
https://github.com/twbs/bootstrap-sass/blob/master/assets/javascripts/bootstrap.js

bootstrap-sass

What's inside bootstrap-sass

Bower

npm / Node.js