Bootstrap 教程

Bootstrap is the most popular and powerful front-end (HTML, CSS, and JavaScript) framework for faster and easier responsive web development.

Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for creating common user interface components like forms, buttons, navigations, dropdowns, alerts, modals, tabs, accordions, carousels, tooltips, and so on.

Bootstrap gives you ability to create flexible and responsive web layouts with much less efforts.

Bootstrap was originally created by a designer and a developer at Twitter in mid-2010. Before being an open-sourced framework, Bootstrap was known as Twitter Blueprint.

You can save a lot of time and effort with Bootstrap. So bookmark this website and continue on.

---

What You Can Do with Bootstrap

There are lot more things you can do with Bootstrap.

• You can easily create responsive websites.
• You can quickly create multi-column layout with pre-defined classes.
• You can quickly create different types of form layouts.
• You can quickly create different variation of navigation bar.
• You can easily create components like accordions, modals, etc. without writing any JS code.
• You can easily create dynamic tabs to manage large amount of content.
• You can easily create tooltips and popovers to show hint text.
• You can easily create carousel or image slider to showcase your content.
• You can quickly create different types of alert boxes.

The list does not end here, there are many other interesting things that you can do with Bootstrap. You will learn about all of them in detail in upcoming chapters.

---

Advantages of Using Bootstrap

If you have had some experience with any front-end framework, you might be wondering what makes Bootstrap so special. Here are some advantages why one should opt for Bootstrap framework:

• Save lots of time — You can save lots of time and efforts using the Bootstrap predefined design templates and classes and concentrate on other development work.
• Responsive features — Using Bootstrap you can easily create responsive websites that appear more appropriately on different devices and screen resolutions without any change in markup.
• Consistent design — All Bootstrap components share the same design templates and styles through a central library, so the design and layout of your web pages will be consistent.
• Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML, CSS and JavaScript can start development with Bootstrap.
• Compatible with browsers — Bootstrap is created with modern web browsers in mind and it is compatible with all modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.
• Open Source — And the best part is, it is completely free to download and use.

---

What This Tutorial Covers

This Bootstrap tutorial series covers all the features of the Bootstrap framework, starting with the basics, such as grid system, typography styling mechanism, form styling methods, as well as, techniques of styling common user interface elements like tables, lists, images, etc.

Further you will learn how to utilize the ready to use Bootstrap components such as input groups, button groups, media objects, navbar, panels, pagination, labels and badges, progress bars, etc. as well as how to customize them to create their different variations.

Finally, you will explore some advanced features of the Bootstrap like creating modal window, dynamic tabs, tooltips, alerts, accordion menu, carousel, scrollspy, etc. as well as how to customize them or extend their existing functionality using the available options and methods.