Bootstrap), bootstrap

Bootstrap (conversion), bootstrap
Bootstrap

With the increasing maturity of the Internet and the increasing use of mobile devices to access the Internet, the work of Web designers and Web developers has become increasingly complex.

Ten years ago, everything was much simpler. At that time, most users sat in front of the table and browsed our webpage through a large display. 960 pixels is the reasonable webpage width at that time. In those years, our development work was mainly to deal with more than a dozen desktop browsers, and to be compatible with the strange old version of IE browsers by adding hack of several browsers. Today, with the rapid development of handheld electronic devices in the past year 56 s, everything has changed. We can see that smartphones and tablets of various sizes are emerging one after another. e-readers and browsers on TV devices are also emerging. The diversity of such devices is growing.

It is foreseeable that more and more people will use mobile devices to access the Internet in the near future. In fact, a considerable number of people are accessing the Internet only through smartphones. This means that we Web designers and developers need to know how to present and adapt to our products in the vast mobile client realm, which is crucial. At the time of writing this article, although we have not fully understood how to present all the content displayed on the desktop to the same effect on the handheld device, however, technologies and tools used to achieve this goal are getting better and better.

When you do not know the screen size of the browser, the most important strategy is to use responsive web page design. It is a method for outputting the corresponding page layout based on the size of the browser window of the device. Most browsers on small mobile devices (such as smartphones and tablets) will narrow down a webpage to fit their screen size by default, then, you can view the entire webpage through scaling or scrolling. This method is technically feasible, but it is poor from the perspective of user experience. Text on small screens is too small to read, links are too small to click, scaling and scrolling operations are more or less distracting when reading.

Responsive webpage design uses the same HTML document to adapt to all terminal devices. Responsive webpage design loads different styles according to the screen size of the device, in this way, the optimal webpage layout is displayed on different terminal devices. For example, when you view a webpage in a large-screen desktop browser, the webpage content may be divided into many columns, and there are common navigation bars. If you view the same page on a small-screen smartphone, you will find that the page content is displayed in the same column, and the navigation button is large enough to be easily clicked. You can see many responsive web design cases on the Media Queries website. Open a design case in your browser and change the size of the browser window. You will see that the webpage layout will change accordingly.

So far, we can see that responsive web design can effectively help us cope with the increasing diversity of terminal devices. What tools and technologies can be used to design responsive web pages? Do we all need to be web masters to master this technology? Or is it enough to use the basic web knowledge we already know? Is there any tool available to help us?

At this time, the front-end development framework debuted. It is not difficult to implement responsive web page design, but it is a little tricky to make it operate properly on all target devices. The framework makes this work easier. With the framework, you can create responsive and compliant websites with minimal effort, everything is simple and consistent. The Framework has many advantages, such as simplicity and speed, and consistency between different devices. The biggest advantage of a framework is its ease of use. Even if you only have a small amount of web knowledge, you can use them without any obstacles.

In short, if you take the current web development work seriously, using the framework for development is not an option but a necessary task. Your site must be highly flexible to adapt to different browsers, tablets, smartphones, and a variety of other handheld devices.

A front-end development framework is actually a collection of productized HTML/CSS/JavaScript components, which can be used in design. There are many front-end development frameworks, some of which are well written. For your convenience, the following lists several front-end development frameworks that are currently the most powerful and widely used. Remember, these frameworks are not just CSS grids, but a complete front-end development framework.

 

1. Bootstrap

Boostrap is definitely the most popular and widely used framework. It is a beautiful, intuitive and powerful web design toolkit that can be used to develop cross-browser compatible and beautiful pages. It provides many popular simple style UI components, raster systems, and some common JavaScript plug-ins.

Bootstrap is written LESS in a dynamic language and consists of four parts:

• Scaffolding-- Global style: a responsive 12-column grid layout system. Remember that Bootstrap does not include the responsive layout feature by default. Therefore, if your design requires responsive layout, You need to manually enable this feature.
• Basic CSS-- Includes basic HTML page elements, such as tables, forms, buttons, and images. basic CSS provides elegance for these elements, multiple consistent styles.
• Components-- Collect a large number of reusable components, such as the following menu (dropdowns), button group, and navigation control-including tabs, pills, and lists labels, breadcrumbs, pagination, thumbnail, progress bar, and media objects.
• JavaScript-- Includes a series of jQuery plug-ins that can implement dynamic page effects of components. The plug-in mainly includes modals, tool tips, popovers, scrollspy, and carousel usel ), enter the prompt (typeahead), and so on.

Bootstrap is powerful enough to implement various forms of Web interfaces. Many tools and resources can be used in combination to facilitate development using Bootstrap. Some of the tools and resources are listed below.

• JQuery UI Bootstrap-this is a very good resource for jQuery and Bootstrap fans. It can introduce the refreshing Bootstrap interface components into jQuery UI.
• JQuery Mobile Bootstrap Theme -- similar to the jQuery UI topic mentioned above, it is a topic created for jQuery mobile. If you want a website developed with Bootstrap to be able to be accessed elegantly on the mobile phone end, this resource is very convenient and easy to use for you.
• Fuel UX -- it adds some lightweight JavaScript controls to Bootstrap. Fuel UI is easy to install, modify, update, and optimize.
• StyleBootstrap.info -- Bootstrap provides several UI styles. StyleBootstrap provides more color options and you can apply different colors to each component.
• BootSwatchr-you can use this tool to view the modified theme immediately. For the effect of each change, this application generates a unique URL for you to share with others. You can also modify your subject at any time.
• Bootswatch-provides a large number of free Bootstrap topics.
• Bootsnipp, an online front-end framework interaction component creation tool, is a free element provided to designers and developers Based on the Bootstrap HTML/CSS/JavaScript architecture.
• LayoutIt-the Bootstrap-based front-end code can be easily and quickly created using the drag-and-drop generator on the interface. You can drag and drop Bootstrap components to your personal design and modify attributes conveniently.

2. Fbootstrapp

Fbootstrapp is based on Bootstrap and provides the same features as Facebook iframe apps and designs. Contains the basic CSS and HTML for all standard components, including typographical, form, button, table, grid, navigation, and so on. The style is similar to that of Facebook.

 

3. BootMetro

The BootMetro framework is inspired by Metro ui css and built based on the Bootstrap framework to create a Windows 8 Metro-style website. It includes all Bootstrap functions and adds several additional functions, such as page tile and application bar.

 

4. Kickbacks

Kickboxing is a variant of Bootstrap. It is based on Bootstrap and adds many apps, themes, and additional features based on it. This allows the framework to be used independently to build websites without additional installation. All you need to do is put it on your website and use it.

An App is a JavaScript and CSS package file that loads and runs after some pages are loaded. By default, the loaded apps include Knockout. js, Retina. js, Firebug Lite, and Updater. You can also add more apps by yourself.

Choosing different themes can make your website stand out from other similar websites built by Bootstrap.

Additional functions are some attachments used to extend the Bootstrap UI library. Their syntax is basically the same or similar.

How to convert a website into bootstrap

You need to change the code and relay the layout.

Bootstrap dynamic navigation page Jump failure

Manually switch the active style