Bootstrap: Responsive Web Development

Discover how easy it is to design killer interfaces and responsive websites with the Bootstrap framework. This practical book gets you started building pages with Bootstrap’s HTML/CSS-based tools and design templates right away. You’ll also learn how to extend your app with interactive features, using its suite of jQuery plugins—often without writing a single line of code. Developed by Twitter and available free from GitHub, Bootstrap supports responsive design by dynamically adjusting your web page layout. With just a basic knowledge of HTML, CSS, and JavaScript, you can build apps that work equally well on desktop screens, smartphones, and tablets. This book shows you how. * Become familiar with Bootstrap’s file structure, grid systems, and container layouts * Learn HTML elements for typography, code, tables, forms, buttons, images, and icons * Design interfaces and other web elements, such as navigation, breadcrumbs, and custom modal windows * Use jQuery plugins for features such as revolving slideshows, tabbable interfaces, and dropdown menus * Modify everything from column count to typography colors with the LESS stylesheet language Copyright 4 Table of Contents 5 Foreword 9 Preface 11 Who This Book Is For 11 Who This Book Is Not For 11 What This Book Will Do For You 11 How This Book Works 12 Why I Wrote This Book 12 Other Resources 12 Are You Sure You Want Bootstrap? 12 Conventions Used in This Book 13 Using Code Examples 13 Help This Book Grow 14 Safari庐 Books Online 14 How to Contact Us 15 Acknowledgments 15 Chapter聽1.聽Bootstrap Scaffolding 17 What Is Bootstrap? 17 Bootstrap File Structure 18 Basic HTML Template 18 Global Styles 19 Default Grid System 19 Basic Grid HTML 20 Offsetting Columns 20 Nesting Columns 21 Fluid Grid System 21 Container Layouts 22 Responsive Design 22 What Is Responsive Design? 23 Chapter聽2.聽Bootstrap CSS 25 Typography 25 Headings 25 Lead Body Copy 26 Emphasis 27 Bold 27 Italics 27 Emphasis Classes 27 Lists 31 Code 33 Tables 34 Optional Table Classes 35 Table Row Classes 36 Forms 37 Optional Form Layouts 38 Supported Form Controls 40 Extended Form Controls 43 Form Control Sizing 45 Form Control States 48 Buttons 50 Button Sizes 51 Disabled Button Styling 52 Images 53 Icons 54 GLYPHICONS Attribution 55 Usage 55 Chapter聽3.聽Bootstrap Layout Components 57 Dropdown Menus 57 Options 58 Button Groups 58 Button Groups as Radio Buttons and Checkboxes 60 Buttons with Dropdowns 60 Split Button Dropdowns 61 Dropup Menus 62 Navigation Elements 62 Tabular Navigation 63 Basic Pills Navigation 63 Stackable Navigation 64 Dropdowns 65 Navigation Lists 66 Tabbable Navigation 67 Navbar 70 Navbar Links 70 Forms 71 Navbar Menu Variations 71 Breadcrumbs 74 Pagination 75 Pager 77 Labels 78 Badges 78 Typographic Elements 79 Hero Unit 79 Page Header 79 Thumbnails 80 Alerts 81 Progress Bars 82 Media Object 84 Miscellaneous 86 Wells 87 Helper Classes 88 Chapter聽4.聽Bootstrap JavaScript Plugins 89 Overview 89 Programmatic API 90 Transitions 90 Modal 90 Usage 92 Options 92 Methods 93 Events 93 Dropdown 94 Usage 94 Dropdown Usage via JavaScript 95 Method 95 Scrollspy 95 Usage 95 .scrollspy('refresh') Method 96 Options 96 Event 97 Toggleable Tabs 97 Usage 98 Events 98 Tooltips 98 Usage 99 Options 99 Methods 99 Popover 100 Usage 101 Options 101 Methods 102 Alerts 102 Usage 103 Close Method 103 Events 103 Buttons 103 Loading State 103 Single Toggle 104 Checkbox Buttons 104 Radio Buttons 105 Usage 105 Methods 105 Collapse 106 Usage 107 Options 107 Methods 108 Events 108 Carousel 109 Usage 110 Options 110 Methods 110 Events 111 Typeahead 111 Usage 111 Options 112 Affix 112 Usage 113 Option 113 Chapter聽5.聽Using Bootstrap 115 GitHub Project 115 Customizing Bootstrap 115 Using LESS 116 Text Snippets 118 Photoshop Templates 119 Themes 120 Built with Bootstrap 120 Conclusion 120 Index 121 About the Author 126 Discover how easy it is to design killer interfaces and responsive websites with the Bootstrap framework. This practical book gets you started building pages with Bootstrap’s HTML/CSS-based tools and design templates right away. You’ll also learn how to extend your app with interactive features, using its suite of jQuery plugins—often without writing a single line of code.Developed by Twitter and available free from GitHub, Bootstrap supports responsive design by dynamically adjusting your web page layout. With just a basic knowledge of HTML, CSS, and JavaScript, you can build apps that work equally well on desktop screens, smartphones, and tablets. This book shows you how.Become familiar with Bootstrap’s file structure, grid systems, and container layoutsLearn HTML elements for typography, code, tables, forms, buttons, images, and iconsDesign interfaces and other web elements, such as navigation, breadcrumbs, and custom modal windowsUse jQuery plugins for features such as revolving slideshows, tabbable interfaces, and dropdown menusModify everything from column count to typography colors with the LESS stylesheet language COMPUTER PROGRAMMING. Bootstrap is a simple HTML, CSS, and Javascript framework for building user interface components and websites. If you want to build killer web interfaces and jump on top of trends like responsive sites, then Bootstrap should be at the foundation of your site build. In addition to the responsive framework, Bootstrap offers a suite of jQuery tools like a revolving slideshow, tabbable interface, drop down menus, and custom modal windows. In this book, we'll look into how you can add these tools to your development workflow