In the video Twitter Bootstrap & ASP.NET MVC - Intro / Quickstart, Ben Cull walks us through Bootstrap, how it impacts your development experience and how to get the most out of it to produce functional and visually pleasing solutions.
Note: There's been syntax changes in Bootstrap versions from when this was recorded. Example: In the video what was written: col-md-offset ...is currently written offset-col-md (according to the Bootstrap 5 docs).
Writing CSS is easy. Writing a lot of CSS can become unwieldy and unmanageable. Using CSS pre-processors like LESS or SCSS helps you segment and organize your CSS logically and compiles down to regular CSS so there are extra steps to get up and running.
Efficient programmers do not re-invent the wheel. That's why we use the best Web UI libraries.
Bootstrap is a NuGet Package that provides a jump-start for HTML-based projects. It includes the HTML, CSS and JavaScript framework used to build the Twitter site.
Bootstrap provides a powerful, responsive layout with its rows and columns.
Creating a responsive website? It's important to make sure the browser renders your content correctly on any screen size. Define the proper viewport meta tag to inform web browsers they need to behave responsively.
When designing responsive websites, it's important to consider what content is appropriate for each screen size. Desktops might have large navigation areas and extra content in a sidebar, whereas the phone might focus on other content.
When building a web application, you may eventually need icons somewhere in the UI. In the past this was done with images (e.g. png, jpg) which can create a lot of resource management, inconsistency, and other pain. Instead, you should use an icon font that provides scalable and adaptable iconography.
- Do you always use a CSS preprocessor language over plain CSS, such as LESS or SCSS?
- Do you use CSS frameworks?
- Do you provide alternate sizings for Bootstrap columns?
- Do you set device width when designing responsive web applications?
- Do you use display classes to responsively hide/show content?
- Do you use the best libraries for icons?