blog

WHAT YOU NEED TO KNOW ABOUT BOOTSTRAP 4

Bootstrap is beloved by many. Well, if not “beloved”, then it is at least appreciated for what it is: a giant framework with almost everything you could need for building a site or web app interface. Bootstrap is changing, though.

That’s right, version four is in alpha release. Naturally, we’re just as curious to know what’s different, so I dived into the documentation to find out.

Keep in mind, though, that this is an alpha release. It cannot be considered feature-complete. It could radically change. It could become sentient and bring about The Singularity. You never know.

For now, it’s a fascinating (I’m fun at parties) look at the future of the most popular CSS framework out there.

FROM LESS TO SASS

This is obviously the biggest and most important change. Heck, you’ve probably already heard of it. People have gone so far as to procliam the “death of Less” due to this switchover.

Well, I don’t know if anything’s gone and died because the Bootstrap team decided to do things differently. It is, however, a monumental undertaking, and it will drastically change how people use and customize the framework.

Sass is just generally more developer-friendly, with wider support, a bigger community, and yes, more features. It can do some things that, right now, Less just can’t.

I say this with sadness. I’ve never made any secret of my love for Less; but it seems that the community at large has spoken, and declared that Sass is just, well, better. If you want to read the reasoning for this change for yourself, check out this discussion on Github.

NEW FEATURES

CARDS

Okay, we’ve been seeing the proliferation of card-based design for some time now. Bootstrap now has a specific component for them, with myriad layout options. You can group them up, keep them separate, add headers, footers, buttons, images, and overlay text on those images.

Wells, thumbnails, and panels all get replaced by the new card component, so in that way, Bootstrap is a bit more streamlined.

FIGURES

Figures are for showcasing single media objects (usually images), with an optional caption. Support for Bootstrap’s various helper classes is factored in, so you can align and style the image (and its caption) however you like.

Images placed in a figure element, given the right classes, become responsive automatically.

FLEXBOX

Now, due to lack of support, Flexbox has not replaced the regular grid system. However, it is available to anyone who wants it. Change a variable, recompile the Sass, and boom! You now have a new, modern layout system.

REBOOT: NEW CUSTOMIZATION VARIABLES

Bootstrap has historically been a bit of a pain to customize, aesthetically speaking:

There were a lot of styles to over-write, and individual variables to customize if you wanted to make your Bootstrap-based site look like anything other than a Bootstrap-based site. Heck, remember all of those customization apps made just for changing Boostrap’s look? Well the developers have heard your prayers and Github issues.

Change all of the transition animations at once, disable rounded corners, change all the colors, or anything else you like with one big bunch of Sass variables. It’s all there in the Reboot module, and it’s about time. We can expect some more original-looking designs now, with any luck.

REM AND EM UNITS

That’s right, we’re moving away from pixels, to these relational units of measurement. This ties into the whole customization thing, too. Want a tighter design with thinner margins? Change the main text size, maybe a couple of variables, and boom. Everything looks “thinner”.

STUFF THAT’S BASICALLY THE SAME

As you might expect, everything got re-written and upgraded. I mean, they moved to Sass. But still, the basic usage for most of these components will be the same.

Do double-check the documentation, though. Certain things will have changed. Take the grid, for example: they added an “extra-large” tier to the grid system, presumably for those ridiculously huge retina screens that we’re seeing these days.

  • Alerts
  • Breadcrumb
  • Button dropdown
  • Button group
  • Buttons
  • Card
  • Carousel
  • Code
  • Collapse
  • Dropdowns
  • Forms
  • Images
  • Input group
  • Jumbotron
  • Label
  • List group
  • Modal
  • Navbar
  • Navs
  • Pagination
  • Popovers
  • Progress
  • Reboot
  • Scrollspy
  • Tables
  • The Grid
  • Tooltips
  • Typography

OTHER UPDATES

ALL JAVASCRIPT PLUGINS HAVE BEEN RE-WRITTEN

The proliferation of ES6 means that a lot of people are re-writing their JavaScript. This means performance improvements for all, the exodus of older browsers, and programmers having fun with new toys. It’s a win-win.

NO MORE IE8 SUPPORT

It’s about time. There’s not a whole lot more to say about that. Not much will change for most of us. Anybody who really, really needs to support legacy browsers will have to use an older version of Bootstrap.

OVERALL IMPRESSIONS

Where Foundation is going “smaller” and more streamlined with specialized frameworks, Bootstrap seems to want it all. They have done a lot of work to improve performance, and streamline what they could, but Bootstrap still aims to do just about everything you can think of.

Mind you, anyone can configure their version of the framework however they like by dropping unnecessary modules, or adding new ones. It’s not a big deal. Still, there’s definitely a one-size-fits-all mindset in play.

And that can be a good thing. There are large, wide-scope projects out there that need the room to expand. In any case, Bootstrap will continue to satisfy its users’ needs. It’s going to be mostly the same, but better.

Related posts

7 Replies to “WHAT YOU NEED TO KNOW ABOUT BOOTSTRAP 4
  1. Ion Magnum 是一種最新的減脂儀器,可以快速燃燒掉你身體的脂肪 , 讓你不需要做大量的體育鍛煉 , 輕鬆方便的達到專業美體的效果。 效果: 通過將你體內的脂肪轉化成肌肉,輕鬆减掉你的體重和腰圍。25分鐘的理療比健身房幾個小時的運動效果還要好! 副作用/風險: 該設備已在美國食品藥品監督管理局注册,注册分類爲醫療器械I類,I類醫療器械就是指普通人使用安全性非常好且沒有任何風險的器械。 减脂過程: 减脂板會直接固定安放於你身體的目標减肥部位,通過特殊的信號,Ion Magnum會將該部位的脂肪燃燒轉化成肌肉。(注意:該設備與你在其他沙龍中瞭解的肌肉轉化設備是完全不同的。)療程: 要想取得而保持完美的效果,一個療程需要進行10次理療,每3-7天進行一次。維持理療可以每兩周進行一次。

    http://cosmedicbook.com/treatments/info/SCULPTRA-塑然雅

  2. Parrs 帕氏 【Rotorua Thermal Mud火山泥系列】火山泥潔淨去角質 Thermal Mud Facial Scrub的商品介紹 Parrs 帕氏,Rotorua Thermal Mud火山泥系列,火山泥潔淨去角質 Thermal Mud Facial Scrub

    https://cosmetic.wiki/tag/纏結

Leave a Reply