【文件属性】:
文件名称:Bootstrap 4 responsive web design
文件大小:41.3MB
文件格式:PDF
更新时间:2021-06-15 11:57:51
bootstrap 4 javascript bootstrap
Module 1: Bootstrap 4 By Example
Chapter 1: Getting Started 3
Getting Bootstrap 4
Setting up the framework 5
Folder structure 6
Warming up the sample example 6
Bootstrap required tags 8
Building our first Bootstrap example 10
The container tag 11
Optionally using the CDN setup 14
Community activity 15
Tools 16
Bootstrap and web applications 16
Browser compatibility 17
Summary 18
Chapter 2: Creating a Solid Scaffolding 19
Understanding the grid system 19
Building our scaffolding 20
Setting things up 21
Offset columns 23
Completing the grid rows 24
Nesting rows 24
Finishing the grid 26
Fluid container 28
We need some style! 28
There are headings everywhere 30
Playing with buttons 31
[ ii ]
More typography and code tags 32
Manipulating tables 37
Styling the buttons 40
Like a boss! 41
Final thoughts 42
Box-sizing 42
Quick floats 43
Clearfix 43
Font definitions for typography 44
Summary 44
Chapter 3: Yes, You Should Go Mobile First 47
Making it greater 47
Bootstrap and the mobile-first design 49
How to debug different viewports at the browser 49
Cleaning up the mess 52
Creating the landing page for different devices 53
Mobile and extra small devices 54
Tablets and small devices 59
Desktop and large devices 61
Summary 62
Chapter 4: Applying the Bootstrap Style 65
Changing our grid layout 65
Starting over the grid system 67
The header 67
The introduction header 68
The about section 71
The features section 73
The price table section 75
The footer 78
Forming the forms 81
Newsletter form 81
Contact form 83
The sign-in form 87
Images 89
Helpers 91
Floating and centering blocks 91
Context colors 91
Spacing 92
Responsive embeds 93
Summary 94
[ iii ]
Chapter 5: Making It Fancy 95
Using Bootstrap icons 95
Paying attention to your navigation 99
Until the navigation collapse 100
Using different attachments 102
Coloring the bar 103
Dropping it down 103
Customizing buttons dropdown 106
Making an input grouping 107
Getting ready for flexbox! 109
Understanding flexbox 109
Playing with Bootstrap and flexbox 111
Summary 112
Chapter 6: Can You Build a Web App? 113
Understanding web applications 113
Creating the code structure 114
Adding the navigation 114
Adding the search input 117
Time for the menu options! 118
The option at the thumbnail 118
Adding the Tweet button 119
Customizing the navigation bar 120
Setting up the custom theme 120
Fixing the list navigation bar pseudo-classes 121
You deserve a badge! 122
Fixing some issues with the navigation bar 123
Do a grid again 127
Playing the cards 127
Learning cards in Bootstrap 4 128
Creating your own cards 129
Adding Cards to our web application 130
Another card using thumbnails 133
Implementing the main content 135
Making your feed 136
Doing some pagination 142
Creating breadcrumbs 143
Finishing with the right-hand-side content 144
Summary 149
[ iv ]
Chapter 7: Of Course, You Can Build a Web App! 151
Alerts in our web app 152
Dismissing alerts 153
Customizing alerts 153
Waiting for the progress bar 155
Progress bar options 156
Animating the progress bar 157
Creating a settings page 158
Pills of stack 159
Tabs in the middle 163
Adding the tab content 165
Using the Bootstrap tabs plugin 165
Creating content in the user info tab 166
The stats column 169
Labels and badges 171
Summary 173
Chapter 8: Working with JavaScript 175
Understanding JavaScript plugins 175
The library dependencies 176
Data attributes 176
Bootstrap JavaScript events 177
Awesome Bootstrap modals 177
Modal general and content 179
The modal header 179
The modal body 180
The modal footer 180
Creating our custom modal 181
A tool for your tip 183
Pop it all over 186
Popover events 189
Making the menu affix 191
Finishing the web app 193
Summary 198
Chapter 9: Entering in the Advanced Mode 199
The master plan 200
The last navigation bar with flexbox 201
The navigation search 205
The menu needs navigation 206
Checking the profile 211
[ v ]
Filling the main fluid content 212
From the side stacked menu 213
I heard that the left menu is great! 214
Learning the collapse plugin 216
Using some advanced CSS 220
Filling the main content 221
Rounding the charts 223
Creating a quick statistical card 226
Getting a spider chart 229
Overhead loading 232
Fixing the toggle button for mobile 234
Summary 235
Chapter 10: Bringing Components to Life 237
Creating the main cards 237
The other card using Bootstrap components 241
Creating our last plot 244
Fixing the mobile viewport 246
Fixing the navigation menu 250
The notification list needs some style 253
Adding the missing left menu 254
Aligning the round charts 256
Learning more advanced plugins 258
Using the Bootstrap carousel 258
Customizing carousel items 260
Creating slide indicators 260
Adding navigation controls 262
Other methods and options for the carousel 263
The Bootstrap spy 264
Summary 269
Chapter 11: Making It Your Taste 271
Customizing a Bootstrap component 271
The taste of your button 272
Using button toggle 273
The checkbox toggle buttons 274
The button as a radio button 275
Doing the JavaScript customization 276
Working with plugin customization 276
The additional Bootstrap plugins 282
Creating our Bootstrap plugin 283
Creating the plugin scaffold 284
[ vi ]
Defining the plugin methods 289
The initialize method and plugin verifications 289
Adding the Bootstrap template 290
Creating the original template 292
The slide deck 293
The carousel indicators 294
The carousel controls 295
Initializing the original plugin 295
Making the plugin alive 296
Creating additional plugin methods 298
Summary