Bootstrap5 course

Bootstrap  course

Bootstrap It is the most popular front-end component library in the world , Used to develop responsive layouts 、 Mobile devices are preferred WEB project .

Bootstrap5 Currently Bootstrap The latest version of , Is a set for HTML、CSS and JS Open source toolset developed . It supports Sass Variables and mixins、 Responsive grid system 、 A large number of pre built components and powerful JavaScript plug-in unit , Help you quickly design and customize responsive 、 Mobile device priority sites .

Who is suitable for reading this tutorial ?

As long as you have HTML and CSS Basic knowledge of , You can read this tutorial , And then develop your own website . After you finish this tutorial , You can use Bootstrap development Web Medium level of the project .

Before reading this tutorial , What you need to know :

Before you start reading this tutorial , You must have HTML 、 CSS and JavaScript Basic knowledge of . If you don't understand these concepts yet , Then I suggest you read our tutorials first :

Why use Bootstrap

  • Easy to use : Just for HTML and CSS People with basic knowledge can use it very quickly Bootstrap.

  • Responsive design :Bootstrap According to different platforms ( mobile phone 、 Tablets and desktops ) Make adjustments .

  • Mobile priority : stay Bootstrap in , Adaptive mobile terminal is the core of the framework .

  • Browser compatibility :Bootstrap5 Compatible with all major browsers (Chrome、Firefox、Edge、Safari and Opera). If you need support IE11 And below , Please use Bootstrap4 Or Bootstrap3.

Bootstrap5 example

Here is a simple Bootstrap5 example :

Bootstrap5 example

< div class = " container-fluid p-5 bg-primary text-white text-center " > < h1 > My first Bootstrap page </ h1 > < p > This is a responsive page , Reset the browser size to see the effect ! </ p > </ div > < div class = " container mt-5 " > < div class = " row " > < div class = " col-sm-4 " > < h3 > The first column </ h3 > < p > Programming tutorial </ p > < p > Learn more than technology , It's a dream !!! </ p > </ div > < div class = " col-sm-4 " > < h3 > The second column </ h3 > < p > Programming tutorial </ p > < p > Learn more than technology , It's a dream !!! </ p > </ div > < div class = " col-sm-4 " > < h3 > Third column </ h3 > < p > Programming tutorial </ p > < p > Learn more than technology , It's a dream !!! </ p > </ div > </ div > </ div >

Give it a try »

Bootstrap5 And Bootstrap 3 & 4

Bootstrap5 yes Bootstrap The latest version of , New components used 、 Faster stylesheets and faster responsiveness .

Bootstrap5 Support all major latest stable browsers , But it doesn't support Internet Explorer 11 And below .

Bootstrap5 and Bootstrap 3 & 4 The main difference is Bootstrap5 No longer rely on jQuery, Using native JavaScript, Of course, if we want to use it, we can also introduce jQuery.

Bootstrap5 IE11 The following versions of the browser ,Bootstrap4 Give up on IE8 And iOS 6 Support of . If you need to be compatible with older browsers , Then please use Bootstrap3.

be careful : At present, the official team is still maintaining Bootstrap 3 and Bootstrap 4 , We can continue to use them , however , Not to Bootstrap 3 & 4 Add new features .