📢 Notice 📢
Bootstrap components
Notes from the summary of COMP3011 Lecture 4, 5, and online resources.
Introduction to Bootstrap
Bootstrap is a front-end framework designed to streamline web development by providing:
- Pre-built CSS and JavaScript components
- Responsive layouts
- Cross-browser consistency
- Faster development
Including Bootstrap
- CSS: Add in the
<head>section via CDN - JavaScript: Include before the closing
</body>tag
Grid System
Bootstrap’s grid system is based on a 12-column layout.
Core Concepts:
- Containers: Wrap content with padding and centering
- Rows: Horizontal groups of columns
- Columns: Content holders; classes like
col-sm-*,col-md-*define size
Functionality:
- Responsive behavior using breakpoints (sm, md, lg, xl)
- Easy layout design using rows and columns
- Supports alignment and spacing utilities
Bootstrap Components
Common UI Components:
- Alerts: Contextual messages (success, danger, etc.)
- Breadcrumbs: Indicate user’s navigation path
- Buttons: Customizable with sizes, colors, and states
- Collapse: Toggleable content visibility
- Forms: Various input controls, validation
- Modals: Dialog boxes for pop-ups
- Navbars: Responsive site navigation
- Pagination: Break content into pages
Media & Content:
- Media objects: Align images with text
- Lists: Styled item groups
- Blockquotes: For quoted text formatting
CSS and JavaScript Essentials
CSS Recap:
- Inline CSS: Within HTML elements (not recommended)
- Class/ID-based CSS: Preferred for modularity
- External Stylesheets: e.g.,
bootstrap.cssfor reusable styling
JavaScript in Bootstrap:
- Enables dynamic components (modals, collapse, etc.)
- Include via
<script>at end of body - Often uses jQuery (e.g.,
ajax()for async calls)
Using Bootstrap with Django
- Bootstrap can be used in dynamic templates rendered by Django.
- Use
{% load static %}to link Bootstrap files in templates. - Enhances layout and user interaction in Django apps.
Practical Exercises
- Build a simple navigation bar using Bootstrap.
- Create an index.html and practice layout design.
- Refer to Bootstrap documentation: Bootstrap 3 Components
Portfolio Project Overview
Assignment Task: Create a one-page portfolio using Bootstrap
Required Sections:
- Navbar
- Lead Paragraph
- Biography
- Experience
- Contact Form
This helps in mastering layout, component integration, and responsive design.
Summary of Benefits
- Accelerates front-end development
- Ensures consistent, mobile-friendly UI
- Rich documentation and community
- Seamless integration with backend frameworks like Django
Tip: Use
jQuery.ajax()for dynamic server interaction without full page reloads.
Leave a comment