search
HomeWeb Front-endBootstrap TutorialWhat to use without bootstrap?

What to use without bootstrap?

Jul 30, 2019 am 11:51 AM
bootstrap

What to use without bootstrap?

What to use without bootstrap?

You can use foundation without bootstrap. Usually, development engineers will use Bootstrap, while front-end developers will give priority to Foundation.

There are many key differences between Bootstrap and Foundation, however, I think you only need to remember one thing:

The two design philosophies of ZURB and Twitter are very clear, from their pairing You can tell from the naming of your own framework: Bootstrap means to guide and bootstrap at startup, in other words, it tries to handle everything you need in your project. And Foundation means to create, in other words, it only gives you everything you need in your project. Powerful creativity.

Keeping that perspective, let me now list more key differences between the two:

1. UI Elements

Foundation only arranges a limited number of elements, while Bootstrap gives you all the elements you can imagine.

ZURB's design goal for Foundation is that even if you use predefined UI elements , and it shouldn’t look too similar to everyone’s website.

On the other hand, Bootstrap tries to provide you with all the defined UI elements.

2. REMs VS Pixels

Foundation uses REMs, while Bootstrap uses Pixels.

Using Pixels means that you have to accurately define the height, width, padding, and margin of a component, and in each A device and screen size, because different devices often have very different display effects.

Now Foundation 5 uses REMs instead of EM. In this way, the EM cascade problem is avoided: http://css-tricks .com/font-sizing-with-rem/

Using REMs means that you can directly use font-size: 80%; to make the entire component and its subcomponents smaller by 20%.

It is worth mentioning that through REMs, you can break away from the details of Pixels, so it is very worthwhile to use REMs to handle it.

Foundation also provides the sass mixin method to convert Pixels to REMs. In this way, you can continue to use the Pixels way of thinking to define the page:

.element {
  width: rem-calc(10px); // will be converted to REMs
}

3. Flexible grid VS predefined grid

Foundation's grid It can automatically adapt to the width of the current browser. Boostrap predefines several grid sizes to adapt to mainstream devices and screens.

Bootstrap will suddenly change it when you change the browser width. Grid.

Foundation will flexibly adapt to the current browser width. This is a new technical means. While automatically adapting, it can show the same effect as Transformer.

Foundation There are two main points when the grid changes: small, medium and large. All operations only shrink and enlarge, and adapt to the current browser width. There is no need for a predefined screen size, and the main reason is , encourages you to define different styles according to the size of the screen.

With Bootstrap, you get a fixed or manifold grid, which means you need to set or configure the grid container separately. Not a predefined width.

Using Foundation and Sass, you can freely adjust the size of the largest grid (medium and small are automatically calculated), the number of columns for large screens, and the number of columns for small screens Number.

4. Mobile device first VS also supports mobile devices

Foundation has been designed with any four-corner screen in mind. Bootstrap is designed in advance: Mobile , tablets, desktops and extra-large screen desktops.

Building a mobile-first website means it will definitely be usable on larger screens. So, Foundation encourages you to do this: Mobile Prioritize.

If you use Foundation's Sass Media Query Mixin, you will find that there is no specific Media Query to query what a mobile device is, but you use a Media Query to define what should be on a larger screen. How to display.

If you think about desktops first when designing something, you are likely to encounter big problems in supporting smaller screens, and thinking about mobile phones first will allow you to focus on what is most important to users. , making your space more useful.

5. Community

Bootstrap has a larger community. With Foundation, you have to be more self-reliant.

The biggest highlight of Bootstrap is the community. This is a very huge and all-encompassing community, and you can find almost anything you are looking for.

If you choose Foundation, self-reliance may be something you have to master. Almost All solutions are for Bootstrap, you can only build your own.

The above is the detailed content of What to use without bootstrap?. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Using Bootstrap: Creating Modern and Mobile-First WebsitesUsing Bootstrap: Creating Modern and Mobile-First WebsitesApr 30, 2025 am 12:08 AM

Bootstrap is an open source front-end framework for creating modern, responsive, and user-friendly websites. 1) It provides grid systems and predefined styles to simplify layout and development. 2) Mobile-first design ensures compatibility and performance. 3) Through custom styles and components, the website can be personalized. 4) Performance optimization and best practices include selective loading and responsive images. 5) Common errors such as layout problems and style conflicts can be resolved through debugging techniques.

Bootstrap and Web Design: Best Practices and TechniquesBootstrap and Web Design: Best Practices and TechniquesApr 29, 2025 am 12:15 AM

Bootstrap is an open source front-end framework developed by Twitter, suitable for building responsive websites quickly. 1) Its grid system is based on a 12-column structure, allowing for the creation of flexible layouts. 2) Responsive design function enables the website to adapt to different devices. 3) The basic usage includes building a navigation bar, and the advanced usage involves card components. 4) Common errors such as misuse of grid systems can be avoided by correctly setting the column width. 5) Performance optimization includes loading only necessary components, using CDN and file compression. 6) Best practices emphasize tidy code, custom styles and responsive design.

Bootstrap and React: Combining Frameworks for Web DevelopmentBootstrap and React: Combining Frameworks for Web DevelopmentApr 28, 2025 am 12:08 AM

The reason for combining Bootstrap and React is their complementarity: 1. Bootstrap provides predefined styles and components to simplify UI design; 2. React improves efficiency and performance through component development and virtual DOM. Use it in conjunction to enjoy fast UI construction and complex interaction management.

From Zero to Bootstrap: Getting Started QuicklyFrom Zero to Bootstrap: Getting Started QuicklyApr 27, 2025 am 12:07 AM

Bootstrap is an open source front-end framework based on HTML, CSS and JavaScript, designed to help developers quickly build responsive websites. Its design philosophy is "mobile first", providing a wealth of predefined components and tools, such as grid systems, buttons, forms, navigation bars, etc., simplifying the front-end development process, improving development efficiency, and ensuring the responsiveness and consistency of the website. Using Bootstrap can start with a simple page and gradually add advanced components such as cards and modal boxes. Best practices for optimizing performance include customizing Bootstrap, using CDNs, and avoiding overuse of class names.

React and Bootstrap: Enhancing User Interface DesignReact and Bootstrap: Enhancing User Interface DesignApr 26, 2025 am 12:18 AM

React and Bootstrap can be seamlessly integrated to enhance user interface design. 1) Install dependency package: npminstallbootstrapreact-bootstrap. 2) Import the CSS file: import'bootstrap/dist/css/bootstrap.min.css'. 3) Use Bootstrap components such as buttons and navigation bars. With this combination, developers can leverage React's flexibility and Bootstrap's style library to create a beautiful and efficient user interface.

Integrating Bootstrap into React: A Practical GuideIntegrating Bootstrap into React: A Practical GuideApr 25, 2025 am 12:04 AM

The steps to integrate Bootstrap into a React project include: 1. Install the Bootstrap package, 2. Import the CSS file, 3. Use Bootstrap class name to style elements, 4. Use React-Bootstrap or reactstrap library to use Bootstrap's JavaScript components. This integration utilizes React's componentization and Bootstrap's style system to achieve efficient UI development.

What is Bootstrap Used For? A Practical ExplanationWhat is Bootstrap Used For? A Practical ExplanationApr 24, 2025 am 12:16 AM

Bootstrapisapowerfulframeworkthatsimplifiescreatingresponsive,mobile-firstwebsites.Itoffers:1)agridsystemforadaptablelayouts,2)pre-styledelementslikebuttonsandforms,and3)JavaScriptcomponentssuchascarouselsforenhancedinteractivity.

Bootstrap: From Layouts to ComponentsBootstrap: From Layouts to ComponentsApr 23, 2025 am 12:06 AM

Bootstrap is a front-end framework developed by Twitter that integrates HTML, CSS and JavaScript to help developers quickly build responsive websites. Its core functions include: Grid system and layout: based on 12-column design, using flexbox layout, and supporting responsive pages of different device sizes. Components and styles: Provide a rich library of component, such as buttons, modal boxes, etc., and you can achieve beautiful effects by adding class names. How it works: Rely on CSS and JavaScript, CSS uses LESS or SASS preprocessors, and JavaScript relies on jQuery to achieve interactive and dynamic effects. Through these features, Bootstrap greatly improves development

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function