首页 > > > twitter bootstrap web development how-to.pdf

twitter bootstrap web development how-to.pdf

twitter bootstrap web developme…

上传者: 手机3792415630 2014-02-24 评分1 评论0 下载1 收藏10 阅读量291 暂无简介 简介 举报

简介:本文档为《twitter bootstrap web development how-topdf》,可适用于软件工程领域,主题内容包含wwwitebooksinfoTwitterBootstrapWebDevelopmentHowToAhandsonintroductiontobu符等。

www.it-ebooks.info Twitter Bootstrap Web Development How-To A hands-on introduction to building websites with Twitter Bootstrap's powerful front-end development framework David Cochran BIRMINGHAM - MUMBAI www.it-ebooks.info Twitter Bootstrap Web Development How-To Copyright 2012 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: November 2012 Production Reference: 1121112 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84951-882-6 www.packtpub.com Cover Image by William Kewley (william.kewley@kbbs.ie) www.it-ebooks.info Credits Author David Cochran Reviewers Chris Gunther Veturi JV Subramanyeswari Acquisition Editor Sarah Cullington Commissioning Editor Meeta Rajani Technical Editor Vrinda Amberkar Project Coordinator Michelle Quadros Proofreader Maria Gould Production Coordinator Melwyn D'sa Cover Work Melwyn D'sa www.it-ebooks.info About the Author David Cochran is Associate Professor of Communication at Oklahoma Wesleyan University. He and his students have a fondness for envisioning and producing exciting projects, with well-built standards-compliant websites playing a central role in them. David frequently publishes online tutorials to share insights gained in the course of those projects. In recent months, Twitter Bootstrap has been a key topic. You'll find a number of these tutorials at Webdesign.tutsplus.com and at his blog, aLittleCode.com. I would like to thank my wife, Julie, and our kids. Thanks for riding through the busy times with grace. And thank you for the joy you bring. I'm grateful beyond words. I would also like to thank my colleagues, students, and former students at Oklahoma Wesleyan University. You make learning and teaching a pleasure. I look forward to many more projects together. www.it-ebooks.info About the Reviewers Sree (aka Veturi JV Subramanyeswari) is currently working as a solution architect at a well known software consulting MNC in India. After joining this company she served a few Indian MNCs, many start ups, R&D sectors in various roles such as programmer, tech lead, research assistant, and architect. She has more than 8 years of working experience in web technologies covering media and entertainment, publishing, healthcare, enterprise architecture, manufacturing, public sector, defense communication, and gaming. She is also well a known speaker who delivers talks on Drupal, Open Source, PHP, women in technology, and so on. She has also reviewed other technical books such as Drupal Rules, DevOps, Drupal 7 Multi Sites Configuration, Building Powerful and Robust Websites with Drupal 6, Drupal 6 Module Development, PHP Team Development, Drupal 6 Site Blueprints, Drupal 6 Attachment Views, Drupal E-Commerce with Ubercart 2.x, Drupal 7: First Look, and Drupal SEO. I would like to thank my family and friends who supported me in completing my reviews on time with good quality. Chris Gunther is the co-founder of Room 118 Solutions, a web development consultancy based out of the New York. Chris is a web application developer, handling both frontend and backend development. He has contributed to many open source projects, including Bootstrap. Chris spends most of his time developing with Ruby on Rails. www.it-ebooks.info www.PacktPub.com Support files, eBooks, discount offers and more You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? f Fully searchable across every book published by Packt f Copy and paste, print and bookmark content f On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. www.it-ebooks.info Table of Contents Preface 1 Twitter Bootstrap Web Development How-To 7 Downloading and setting up (Must know) 7 Headings, links, and buttons (Must know) 11 Conquering the layout (Must know) 14 Creating a standard sub-page (Must know) 19 Creating a portfolio page (Must know) 23 Creating a products page (Must know) 25 Customizing the navbar (Must know) 27 Making it responsive (Should know) 30 Adding drop-down lists (Should know) 31 Using tabs for switching content (Should know) 34 Creating a homepage carousel (Should know) 37 Optimizing and customizing (Should know) 41 Uploading, testing, and launching (Must know) 48 Appendix: Bootstrap resources 54 www.it-ebooks.info ii Table of Contents www.it-ebooks.info Preface One of the joys of front-end web development is its culture of spontaneous generosity. Run into trouble achieving your desired design? Is browser X or Y causing you problems? Chances are someone has identified the problem, worked out a solution, and posted it with a demo and code samples. Google it up, tweet a thanks, post a comment, maybe even donate a buck, and you're fast friends on the road to some serious web design conquests. Over the years this basic disposition has scaled itself up. From icon packs and gradient generators to grid systems and GitHub projects, our profession's culture of generosity has grown in sophistication. Need a great grid, thoughtful typography, expertly crafted buttons? Perhaps some user-friendly form elements? Can do. Here, there, and yonder, you'll find a plethora of tips, tools, and packs to get it done. It's a beauty to behold. Generosity meet cohesion! Yet perhaps you've noticed an unintended consequence of this habitual generosity. The proliferation of tips, tools, recommendations, and solutions emerge from all across the web. When solutions come from every which way, things can become a bit chaotic. A certain amount of cohesion and consistency are important to design, including interface design. And yet cohesion and consistency often seem to be among the scarcest of resources on the Web. Not that this problem is a new one. The industry of mobile application design handles it by providing developers with Software Development Kits (SDKs) that include carefully honed, cohesive approaches to addressing the standard needs of interface design. The industry of web design, by contrast, has typically not enjoyed the widespread use of similar front-end development kits. Not, that is, until Twitter Bootstrap. www.it-ebooks.info V413HAV Typewritten Text V413HAV Preface 2 When Twitter developers Mark Otto and Jacob Thornton first released Twitter Bootstrap in August 2011, they made a splash. Understandably so, as their framework supplied carefully crafted yet easily modified styles and scripts for the essential elements of a complete web interface. In January of 2012, Twitter Bootstrap 2.0 brought a number of enhancements, most significantly a responsive layout which adapted to desktops, tablets, and handhelds. Thus it has happened that, as of this writing, Twitter Bootstrap has quickly become the most watched of all GitHub projects, with more than 33,000 Github users watching it—more than twice the closest runner up. To emerge so quickly from a field of contenders which includes the likes of the HTML5 Boilerplate and the jQuery JavaScript library, this is no small feat. Given the rate of its growth and the size of its community, we may be forgiven for suspecting that we have something serious on our hands. A serious community Like the HTML5 Boilerplate and the jQuery library, Twitter Bootstrap represents an informed and energetic community exerting its best efforts toward a common and shareable set of best practices. Without demanding submission or commanding uniformity, the community exerts authority for a simple reason: it produces a cohesive collection of tested, tried, and proven lines of code. The code base may be adopted and embraced, customized and modified, or dissected and examined. In all cases it offers serious solutions for real problems—solutions that speed developers on their way to serving up consistent, reliable, and user-friendly web experiences. The proof is in the pudding. Visit a few of the many sites collected at BuiltwithBootstrap.com <http://builtwithbootstrap.com> and you'll find a pleasing variety of designs sharing a few key features in common: strong typographical conventions, a well formed grid, and a user-friendly interface, amply endowed with cross-browser compatibility and multi-device friendliness to spare. Many a developer has achieved these results without the aid of Twitter Bootstrap, of course, but there is little doubt that Bootstrap helps the cause and contributes to a better Web. Adopt it wholesale or dissect and inspect it, we stand to benefit from the transaction. What this book covers Downloading and setting up (Must know), walks you through the basics—getting the CSS, images, and JavaScript, and creating a page template. Headings, links, and buttons (Must know), introduces you to Bootstrap's ready-made styles for clear typographic hierarchy and turning hyperlinks into visually appealing buttons. Conquering the layout (Must know), experiments with Bootstrap's fantastic twelve-column grid system, just to get familiar with it. Creating a standard sub-page (Must know), applies the Bootstrap grid system to lay out a standard sub-page with a wide main column and a narrower sidebar. www.it-ebooks.info Preface 3 Creating a portfolio page (Must know), assists you in laying out a full-page grid of linked images with captions, using Bootstrap's styles for thumbnails. Creating a products page (Must know), walks you through the steps involved in creating a products page. Bootstrap comes with effective styles for laying out a good, basic, visually appealing table. We'll use it to start a products page. Customizing the navbar (Must know), assists you in adding links to these pages in Bootstrap's main navigation bar. Making it responsive (Should know), connects jQuery and Bootstrap's JavaScript plugins to enable the navbar to adapt responsively to small devices and viewports. Adding drop-down lists (Should know), shows how to add drop-down lists to your navbar. With the JavaScript in place, it's quite simple. Using tabs for switching content (Should know), illustrates the use of tabs for switching content. Now that we're getting used to leveraging all of Bootstrap—markup, CSS, and JavaScript—we're ready to create dynamic tabs for switching between panes of content. Creating a homepage carousel (Should know), adds a final touch to your site. To finish our site, we'll add a beautiful image slideshow, using Bootstrap's excellent, fully responsive carousel. Optimizing and customizing (Should know), will show you how to optimize your site for better performance and how to add customizations. Out-of-the-box Bootstrap is great. But you'll want to customize it. We'll bring in some custom colors and font faces. And we'll optimize our files in the process. Uploading, testing, and launching (Must know), walks you through a basic process of uploading our site to the web. Then you'll leverage a couple of great online tools to test our site for both desktop and mobile devices. Appendix: Bootstrap resources, contains a list of resources to help you continue growing as a Bootstrap-equipped developer. What you need for this book The requirements are pretty simple: a computer, an Internet connection, a text editor, and a desire to learn! www.it-ebooks.info Preface 4 Who this book is for I've written with the novice to intermediate developer in mind. If you're new to HTML, CSS, and JavaScript—don't worry! I'll help you along. If you've been designing sites for a while, the book is an ideal way to get a quick introduction to Twitter Bootstrap's distinctive markup, CSS, and JavaScript plugins. If you're an advanced developer, interested in customizing Bootstrap and working with LESS to preprocess your CSS, I'm afraid this book is not for you! Conventions In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning. Code words in text are shown as follows: "Rename the file index.html." A block of code is set as follows: <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template ...</p> ... </div> When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold: <div class="item active"> <img src="img/butterfly.jpg" alt="butterfly" /> <div class="carousel-caption"> <p>Caption content here</p> </div> </div> New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Click on the large Download Bootstrap button". Warnings or important notes appear in a box like this. Tips and tricks appear like this. www.it-ebooks.info Preface 5 Reader feedback Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of. To send us general feedback, simply send an e-mail to feedback@packtpub.com, and mention the book title via the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors. Customer support Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase. Downloading the example code You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you. Errata Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www. packtpub.com/support. www.it-ebooks.info Preface 6 Piracy Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us at copyright@packtpub.com with a link to the suspected pirated material. We appreciate your help in protecting our authors, and our ability to bring you valuable content. Questions You can contact us at questions@packtpub.com if you are having a problem with any aspect of the book, and we will do our best to address it. www.it-ebooks.info Twitter Bootstrap Web Development How-To Welcome to Twitter Bootstrap Web Development How-To. The content of this book is up to date with version 2.1 of Twitter Bootstrap. In what follows, this book will help you to get to know Twitter Bootstrap by trying it on for size. I've written with the novice to intermediate developer in mind. If you've been designing sites for a while, then this book will give you a quick introduction to several key features of Twitter Bootstrap's markup, stylesheets, and JavaScript plugins. If you're new to HTML and CSS (and maybe even a little scared of JavaScript)—don't worry! This book will help you along. If, by contrast, you're looking to compile CSS from LESS and integrate the results with Backbone.js—this isn't for you. Fair enough? Let's dive in. Downloading and setting up (Must know) In a few simple steps, we'll put together a basic starter site equipped with Twitter Bootstrap's framework of stylesheets, icons, and JavaScript plugins. Getting ready Twitter Bootstrap is more than a set of code. It is an online community. To get started, you will do well to familiarize yourself with Twitter Bootstrap's home base: http://twitter.github.com/bootstrap/ www.it-ebooks.info Twitter Bootstrap Web Development How-To 8 Here you'll find the following: f The documentation: If this is your first visit, grab a cup of coffee and spend some time perusing the pages, scanning the components, reading the details, and soaking it in. (You'll see this is going to be fun.) f The download button: You can get the latest and greatest versions of the Twitter Bootstrap's CSS, JavaScript plugins, and icons, compiled and ready for action, coming to you in a convenient ZIP folder. This is where we'll start. Downloading the example code You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub. com/support and register to have the files e-mailed directly to you. How to do it… Whatever your experience level, as promised, I'll walk you through all the necessary steps. Here goes! 1. Go to the Bootstrap homepage: http://twitter.github.com/bootstrap/. 2. Click on the large Download Bootstrap button. 3. Locate the download file and unzip or extract it. You should get a folder named simply bootstrap. Inside this folder you should find the folders and files shown in the following screenshot: 4. From the homepage, click on the main navigation item: Get started. www.it-ebooks.info Twitter Bootstrap Web Development How-To 9 5. Scroll down, or use the se

编辑推荐

  • 名称/格式
  • 评分
  • 下载次数
  • 资料大小
  • 上传时间

用户评论

0/200
    暂无评论
上传我的资料

相关资料

资料评价:

/ 68
所需积分:1 立即下载
返回
顶部
举报
资料
关闭

温馨提示

感谢您对爱问共享资料的支持,精彩活动将尽快为您呈现,敬请期待!