- Bootstrap Site Blueprints
- David Cochran Ian Whitley
- 308字
- 2021-07-16 12:27:39
What we'll build
We've thrown together a couple of home page mock-ups. Though we have in mind what we want for large screens, we've begun with a handheld screen size to force ourselves to focus on the essentials.
You'll notice the following features:
- A collapsed responsive navbar with logo
- A sliding carousel with four images of featured portfolio items
- A single-column layout with three blocks of content, each with a heading, short paragraph, and a nice big button with an invitation to read further
- A footer with social media links
Here is the design mockup as shown in the following screenshot:

Altogether, this should provide a good introduction to our work. The carousel is tall enough to give a good amount of visual space to our portfolio images. It is not difficult to navigate quickly to the content below, where a user can efficiently scan key options for taking a next step inside. By presenting key links as nice big buttons, we will establish helpful visual hierarchy for the key action items, and we will ensure that visitors do not have problems because of fat fingers.
For ease of maintenance, we've elected to have only two major breakpoints in this design. We'll use the single-column layout for screen sizes narrower than 768px. Then, we'll shift to a three-column layout:

You'll note the following features in the mock-up for tablets and higher versions:
- A navigation bar at the top, which is enhanced with icons
- A widescreen version of the home page carousel, with images stretching to fill the full width of the browser
- A three-column layout for our textual content blocks
- A footer with content at the center
The color scheme is fairly simple: shades of gray, plus a golden-green color for links and highlights.
With these design goals in mind, we'll proceed to get our content in place.
- 物聯網短距離無線通信技術應用與開發
- MERN Quick Start Guide
- 從區塊鏈到Web3:構建未來互聯網生態
- 電子政務效益的經濟分析與評價
- 5G承載網網絡規劃與組網設計
- 網絡故障現場處理實踐(第4版)
- Windows Server 2003 Active Directory Design and Implementation: Creating, Migrating, and Merging Networks
- 智慧城市中的移動互聯網技術
- Getting Started with Grunt:The JavaScript Task Runner
- OMNeT++與網絡仿真
- 夢工廠之材質N次方:Maya材質手冊
- 5G技術與標準
- Getting Started with Memcached
- 從實踐中學習手機抓包與數據分析
- LwIP應用開發實戰指南:基于STM32