Главная » Языки программирования

Bootstrap grid css cdn

Содержание
  1. Contents
  2. Precompiled Bootstrap
  3. CSS files
  4. Saved searches
  5. Use saved searches to filter your results more quickly
  6. License
  7. dmhendricks/bootstrap-grid-css
  8. Name already in use
  9. Sign In Required
  10. Launching GitHub Desktop
  11. Launching GitHub Desktop
  12. Launching Xcode
  13. Launching Visual Studio Code
  14. Latest commit
  15. Git stats
  16. Files
  17. README.md
  18. About
  19. Download
  20. Compiled CSS and JS
  21. Source files
  22. Examples
  23. CDN via jsDelivr
  24. Package managers
  25. npm
  26. yarn
  27. RubyGems
  28. Composer
  29. NuGet
  30. Bootstrap grid css cdn

Contents

Discover what’s included in Bootstrap, including our precompiled and source code flavors.

Precompiled Bootstrap

Once downloaded, unzip the compressed folder and you’ll see something like this:

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS ( bootstrap.* ), as well as compiled and minified CSS and JS ( bootstrap.min.* ). source maps ( bootstrap.*.map ) are available for use with certain browsers’ developer tools. Bundled JS files ( bootstrap.bundle.js and minified bootstrap.bundle.min.js ) include Popper.

Читайте также:  Includes classes email php

CSS files

Bootstrap includes a handful of options for including some or all of our compiled CSS.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS.

License

dmhendricks/bootstrap-grid-css

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Original Copyright: (c) 2011-2018 Twitter, Inc.

There are times when you only want to use the excellent Bootstrap grid functionality but don’t want the extra classes and typography changes included, often when asked to work on existing client sites that do not include any responsive frameworks and you just want to get the changes done quickly and responsively. With Bootstrap 4, extracting the grid functionality is easy.

  • Grid framework
  • Responsive Utilities (ported from alpha)
  • .img-fluid class (formerly .img-responsive in Bootstrap 3)
  • clearfix utility
npm install bootstrap-grid-only-css --save
bower install bootstrap4-grid-only

Unlike traditional Bootstrapped, the grid must be wrapped with the .bootstrap-wrapper class in an attempt to minimize potential conflicts with other libraries.

Simply download the appropriate CSS file and include it in your HTML header (you only need one):

Documentation for the grid system may be found on the Bootstrap web site.

Add the following to the head of your web page:

link rel pl-s">stylesheet" href pl-s">dist/css/bootstrap-grid.min.css" />

Supports both HTTP and HTTPS.

link rel pl-s">stylesheet" href pl-s">//cdn.jsdelivr.net/gh/dmhendricks/bootstrap-grid-css@4.1.3/dist/css/bootstrap-grid.min.css" />
div class pl-s">bootstrap-wrapper"> div class pl-s">container"> div class pl-s">row"> div class pl-s">col-md-4">.col-md-4div> div class pl-s">col-md-4">.col-md-4div> div class pl-s">col-md-4">.col-md-4div> div> div class pl-s">row hidden-sm-down"> div class pl-s">col-md-6">.col-md-6div> div class pl-s">col-md-6">.col-md-6div> div> div> div>

See the demo for more information.

You can make your own custom build of Bootstrap by downloading the source, making changes to the SCSS files and compiling.

Here is how to accomplish what I have done here:

  1. Download and extract the Bootstrap source files
  2. Modify the SCSS files as desired. For example, to generate this build I added the .bootstrap-wrapper class to scss/bootstrap-grid.scss (lines 23 and 50), included the responsive utilities (line 43) and .img-fluid class (line 48). I also ported the scss/utilities/_visibility.scss responsive utilities that were found in alpha for convenience.
  3. Once you are done making your changes, use a program like Koala or Scout to compile the SCSS files into usable CSS files. If you have Gulp and npm installed, you can simply run the command: gulp styles

About

The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS.

Источник

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.

Compiled CSS and JS

Download ready-to-use compiled code for Bootstrap v5.1.3 to easily drop into your project, which includes:

This doesn’t include documentation, source files, or any optional JavaScript dependencies like Popper.

Source files

Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:

Should you require our full set of build tools, they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.

Examples

If you want to download and examine our examples, you can grab the already built examples:

CDN via jsDelivr

Skip the download with jsDelivr to deliver cached version of Bootstrap’s compiled CSS and JS to your project.

link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">script>

If you’re using our compiled JavaScript and prefer to include Popper separately, add Popper before our JS, via a CDN preferably.

script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">script> script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">script>

Package managers

Pull in Bootstrap’s source files into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will require a Sass compiler and Autoprefixer for a setup that matches our official compiled versions.

npm

Install Bootstrap in your Node.js powered apps with the npm package:

const bootstrap = require(‘bootstrap’) or import bootstrap from ‘bootstrap’ will load all of Bootstrap’s plugins onto a bootstrap object. The bootstrap module itself exports all of our plugins. You can manually load Bootstrap’s plugins individually by loading the /js/dist/*.js files under the package’s top-level directory.

Bootstrap’s package.json contains some additional metadata under the following keys:

  • sass — path to Bootstrap’s main Sass source file
  • style — path to Bootstrap’s non-minified CSS that’s been precompiled using the default settings (no customization)

Get started with Bootstrap via npm with our starter project! Head to the twbs/bootstrap-npm-starter template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.

yarn

Install Bootstrap in your Node.js powered apps with the yarn package:

RubyGems

Install Bootstrap in your Ruby apps using Bundler (recommended) and RubyGems by adding the following line to your Gemfile :

Alternatively, if you’re not using Bundler, you can install the gem by running this command:

gem install bootstrap -v 5.1.3

Composer

You can also install and manage Bootstrap’s Sass and JavaScript using Composer:

composer require twbs/bootstrap:5.1.3

NuGet

If you develop in .NET, you can also install and manage Bootstrap’s CSS or Sass and JavaScript using NuGet:

Install-Package bootstrap.sass
  • Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
  • Code licensed MIT, docs CC BY 3.0.
  • Currently v5.1.3.
  • Analytics by Fathom.

Источник

Bootstrap grid css cdn

Original Copyright: (c) 2011-2018 Twitter, Inc.

There are times when you only want to use the excellent Bootstrap grid functionality but don’t want the extra classes and typography changes included, often when asked to work on existing client sites that do not include any responsive frameworks and you just want to get the changes done quickly and responsively. With Bootstrap 4, extracting the grid functionality is easy.

  • Grid framework
  • Responsive Utilities (ported from alpha)
  • .img-fluid class (formerly .img-responsive in Bootstrap 3)
  • clearfix utility
npm install bootstrap-grid-css
bower install bootstrap4-grid-only

Unlike traditional Bootstrapped, the grid must be wrapped with the .bootstrap-wrapper class in an attempt to minimize potential conflicts with other libraries.

Simply download the appropriate CSS file and include it in your HTML header (you only need one):

Documentation for the grid system may be found on the Bootstrap web site.

Linking to stylesheet example:

link rel="stylesheet" href="dist/css/bootstrap-grid.min.css" />

Supports both HTTP and HTTPS.

link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/bootstrap-grid-css@4.1.3/dist/css/bootstrap-grid.min.css" />
div class="bootstrap-wrapper">
 div class="container">
 div class="row">
 div class="col-md-4">.col-md-4div>
 div class="col-md-4">.col-md-4div>
 div class="col-md-4">.col-md-4div>
 div>
 div class="row hidden-sm-down">  Hidden on small screens -->
 div class="col-md-6">.col-md-6div>
 div class="col-md-6">.col-md-6div>
 div>
 div>
div>

See the demo for more information.

You can make your own custom build of Bootstrap by downloading the source, making changes to the SCSS files and compiling.

Here is how to accomplish what I have done here:

  1. Download and extract the Bootstrap source files
  2. Modify the SCSS files as desired. For example, to generate this build I added the .bootstrap-wrapper class to scss/bootstrap-grid.scss (lines 23 and 50), included the responsive utilities (line 43) and .img-fluid class (line 48). I also ported the scss/utilities/_visibility.scss responsive utilities that were found in alpha for convenience.
  3. Once you are done making your changes, use a program like Koala or Scout to compile the SCSS files into usable CSS files. If you have Gulp and npm installed, you can simply run the command: gulp styles

Источник

Оцените статью
© 2024 Программирование