- 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.
- 物聯網(IoT)基礎:網絡技術+協議+用例
- 信息通信網絡建設安全管理概要2
- Windows Server 2003 Active Directory Design and Implementation: Creating, Migrating, and Merging Networks
- Building RESTful Web Services with Spring 5(Second Edition)
- Socket.IO Real-time Web Application Development
- The Kubernetes Workshop
- Android UI Design
- 局域網組成實踐
- 人際網絡
- 物聯網,So Easy!
- 想象的互動:網絡人際傳播中的印象形成
- 通信系統實戰筆記:無處不在的信號處理
- 物聯網導論
- 視聽變革:廣電的新媒體戰略
- Learning Dart