Bootstrap v4.0.0-alpha.6 發布,一個 Web 前端框架

jopen 9年前發布 | 12K 次閱讀 Bootstrap HTML CSS web JavaScript

 

Bootstrap 是由 推ter 的 Mark Otto 和 Jacob Thornton 開發的一個用于快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

為什么使用 Bootstrap?

  • 移動設備優先:自 Bootstrap 3 起,框架包含了貫穿于整個庫的移動設備優先的樣式。
  • 瀏覽器支持:所有的主流瀏覽器(Internet Explorer、Firefox、Opera、Google Chrome和Safari)都支持 Bootstrap。
  • 容易上手:只要您具備 HTML 和 CSS 的基礎知識,您就可以開始學習 Bootstrap。
  • 響應式設計:Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機。更多有關響應式設計的內容詳見 Bootstrap 響應式設計。
  • 它為開發人員創建接口提供了一個簡潔統一的解決方案。
  • 它包含了功能強大的內置組件,易于定制。
  • 它還提供了基于 Web 的定制。
  • 它是開源的。

Bootstrap 包的內容:

  • 基本結構:Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
  • CSS:Bootstrap 自帶以下特性:全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class,以及一個先進的網格系統。
  • 組件:Bootstrap 包含了十幾個可重用的組件,用于創建圖像、下拉菜單、導航、警告框、彈出框等等。
  • JavaScript 插件:Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件,也可以逐個包含這些插件。
  • 定制:您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。

更新日志

  • Flexbox is now on by default, with no fallback! This means we've dropped IE9 support, but with significant savings to our code base, simpler components, and improved customization thanks to the power of flexbox.
  • Rebuilt the navbar with flexbox in mind, leading to some structural changes, but including more flexibility and customization. Includes updated docs, code snippets, more responsive options. All navbars in our examples are also using the latest markup and styles now. Also solves around 10 bugs in the process!
  • Overhauled flexbox utilities and documented them. Replaced all the previous flexbox utilities with new ones that are named after property: value pairs (instead of creating new names for things). For example, .flex-items-between is now .justify-content-between to apply justify-content: between;. This also adds tons of new flexbox utilities for displayorderwrap, and more.
  • Revamped navs Sass with flexbox and updated docs. All the floats and clearfixs have been removed,.nav-inline removed (on account of display: flex inlining for us on .nav), added fill and justify options, and more.
  • Building on the grid improvements from Alpha 5, you can now customize container padding across grid breakpoints and optionally remove grid gutters with .no-gutters.
  • Similarly, our flexbox grid system has new classes for automatically sizing columns to the size of their content across viewports (e.g., you can now apply col-xs-6col-md-auto, and col-xl-4 to a single element).
  • Grid, display, float, margin, padding, and text utility classes have been significantly overhauled. In addition to all classes now being responsive, the xs tier no longer requires a breakpoint abbreviation, making for shorter and more descriptive classes and an easier migration from v3. For example, instead of .d-xs-none, it's back to .d-none while it remains .d-{sm,md,lg,xl}-none for those breakpoints.
  • Renamed some .active, all .in, and all .open classes for our JavaScript powered components for more consistent naming. For example, instead it's now .collapse.show instead of .collapse.in and.show > .dropdown-menu instead of .open > .dropdown-menu to better communicate the visibility of elements.
  • Refactored carousel with new, simpler styles, better documentation, and less specific selectors.
  • Rewrote progress component without the <progress> element due to lack of animations, no support for multiple bars, and no support for labels on the progress bars.
  • Fixed some unescaped #s in our SVG data URLs that are used to add vector background-images.
  • Renamed .tag back to .badge, like v3, to avoid conflicts with common WordPress styles.
  • A number of custom form enhancements and bugfixes were made. Label-less custom radios and cehckboxes, fixed SVG URLs in background-images, and more.
  • Updated Normalize.css to v5.0.0.
  • .form-check and .form-check-inline now share the same markup. Switch between the two by adding or removing .form-check-inline as a modifier.
  • Added support for justified navigation when in flexbox mode.
  • Renamed _animation.scss to _transitions.scss for clarity.
  • Added new color variables (e.g., $blue) for additional customization.

下載

本站原創,轉載時保留以下信息:
本文轉自:深度開源(open-open.com)
原文地址:http://www.baiduhome.net/news/view/5d39684

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!