1 00:00:00,000 --> 00:00:02,690 CLAIRE CARROLL: Hi, my name's Claire. 2 00:00:02,690 --> 00:00:05,100 I am here at Yale. 3 00:00:05,100 --> 00:00:09,810 And I will be teaching you today about how to use Bootstrap. 4 00:00:09,810 --> 00:00:12,370 So let's get started. 5 00:00:12,370 --> 00:00:15,780 So first, we're going to talk about what Bootstrap is. 6 00:00:15,780 --> 00:00:21,120 It is an HTML, CSS, and JavaScript framework for projects on the web. 7 00:00:21,120 --> 00:00:25,440 So it basically encapsulates a lot of different aspects of how you might 8 00:00:25,440 --> 00:00:29,130 develop a web or mobile application. 9 00:00:29,130 --> 00:00:34,860 And it helps set up transitions between an application 10 00:00:34,860 --> 00:00:37,650 that you might have on your computer or you might have on a phone 11 00:00:37,650 --> 00:00:42,150 and making sure that the layout is going to be visible and display 12 00:00:42,150 --> 00:00:46,830 the way you want it to on different sorts of platforms. 13 00:00:46,830 --> 00:00:53,560 It's also super helpful because it has a lot of pre-compiled and pre-set up 14 00:00:53,560 --> 00:00:59,340 basically libraries for you, and a really expensive but customizable 15 00:00:59,340 --> 00:01:02,490 codebase that you can use to make it sort of do whatever you want. 16 00:01:02,490 --> 00:01:05,430 So it's not going to replace all of your CSS. 17 00:01:05,430 --> 00:01:08,160 You'll still probably want a style sheet. 18 00:01:08,160 --> 00:01:11,010 But it can set up a lot of the functionality in advance for you. 19 00:01:11,010 --> 00:01:14,880 And then, you can modify it as you need. 20 00:01:14,880 --> 00:01:17,280 So why use it? 21 00:01:17,280 --> 00:01:21,750 It's really very easy if you want to make a navigation bar, 22 00:01:21,750 --> 00:01:24,210 instead of fiddling around with padding and columns 23 00:01:24,210 --> 00:01:27,600 and all sorts of containers for a really long time like I 24 00:01:27,600 --> 00:01:34,290 used to do all the time, you can just use the navigation settings 25 00:01:34,290 --> 00:01:37,710 that Bootstrap has already set up for you, which we'll go into a little bit 26 00:01:37,710 --> 00:01:39,090 later. 27 00:01:39,090 --> 00:01:42,300 It has a lot of features for most different things 28 00:01:42,300 --> 00:01:44,430 you could want to put in a web application. 29 00:01:44,430 --> 00:01:48,240 And if they don't have it built in natively, 30 00:01:48,240 --> 00:01:50,040 I'm sure someone has hacked it. 31 00:01:50,040 --> 00:01:54,390 So you can probably find support for a functionality online. 32 00:01:54,390 --> 00:01:58,320 And it's an open source project, which means it's free. 33 00:01:58,320 --> 00:01:59,940 And it's evolving. 34 00:01:59,940 --> 00:02:04,110 So even-- it probably won't change that much during the time 35 00:02:04,110 --> 00:02:06,090 you're working on your projects. 36 00:02:06,090 --> 00:02:08,759 We're in Bootstrap 3 right now. 37 00:02:08,759 --> 00:02:13,050 But it is something that is growing and changing to the needs of the developer 38 00:02:13,050 --> 00:02:15,780 community, which is really cool. 39 00:02:15,780 --> 00:02:19,170 There is, as I said before, a great library with lots of stuff 40 00:02:19,170 --> 00:02:20,730 you can customize. 41 00:02:20,730 --> 00:02:24,630 And it's just very streamlined. 42 00:02:24,630 --> 00:02:26,200 A lot of popular sites use it. 43 00:02:26,200 --> 00:02:31,540 So for example, the NBA website uses Bootstrap to develop it. 44 00:02:31,540 --> 00:02:35,160 And as of last year, Vogue did. 45 00:02:35,160 --> 00:02:36,840 They've since upgraded. 46 00:02:36,840 --> 00:02:41,500 But it worked for them for six months or so. 47 00:02:41,500 --> 00:02:44,940 And same story with Wal-Mart, which is just kind of cool to see, 48 00:02:44,940 --> 00:02:49,620 that big sites use this and are supporting this, 49 00:02:49,620 --> 00:02:55,290 and it can sustain the layout and the intricacies that you might want. 50 00:02:55,290 --> 00:02:58,620 So that's kind of fun. 51 00:02:58,620 --> 00:03:00,870 How to get started with Bootstrap? 52 00:03:00,870 --> 00:03:03,870 53 00:03:03,870 --> 00:03:08,996 Basically, you can pick from three different options of which bootstrap 54 00:03:08,996 --> 00:03:10,620 you think is going to be right for you. 55 00:03:10,620 --> 00:03:15,054 So there's the pre-compiled Bootstrap, which is best for people just 56 00:03:15,054 --> 00:03:17,970 starting out with Bootstrap, people starting out with web development, 57 00:03:17,970 --> 00:03:22,410 people sort of just trying to learn the terrain, which is probably 58 00:03:22,410 --> 00:03:28,920 going to be best for most final project students, at least to start with. 59 00:03:28,920 --> 00:03:32,430 And there is also a source code version, which 60 00:03:32,430 --> 00:03:39,420 you have to then deal with compiling and getting a specific Twitter compiler 61 00:03:39,420 --> 00:03:42,700 to sort of deal with, which is a little more complicated, but not hard. 62 00:03:42,700 --> 00:03:45,780 Because it's still pretty standard CSS and JS 63 00:03:45,780 --> 00:03:48,040 code that you should be able to figure out. 64 00:03:48,040 --> 00:03:50,061 So if that's something you're interested in, 65 00:03:50,061 --> 00:03:52,060 there's a lot of support for how to set that up. 66 00:03:52,060 --> 00:03:54,810 And then, there's also a SASS only version 67 00:03:54,810 --> 00:03:59,310 for Rails projects, which I don't think will apply for many people using 68 00:03:59,310 --> 00:04:00,870 Bootstrap for web apps. 69 00:04:00,870 --> 00:04:04,500 But it might for you, and then it's a valid option. 70 00:04:04,500 --> 00:04:09,060 So the best way to get it is to just go to the Bootstrap website. 71 00:04:09,060 --> 00:04:09,930 You can Google it. 72 00:04:09,930 --> 00:04:10,650 It'll come up. 73 00:04:10,650 --> 00:04:12,600 It's the first hit. 74 00:04:12,600 --> 00:04:15,330 And hit the Download button. 75 00:04:15,330 --> 00:04:18,089 You'll get a folder, which you then can load into the IDE, 76 00:04:18,089 --> 00:04:22,079 or just leave on your desktop if you want to develop there. 77 00:04:22,079 --> 00:04:28,380 But alternatively, if you want to use the terminal to basically get 78 00:04:28,380 --> 00:04:31,920 the project, you can use npm install. 79 00:04:31,920 --> 00:04:35,970 So if you install Node.js and the Grunt client, 80 00:04:35,970 --> 00:04:40,950 then you can use the Node Package Manager to get Bootstrap 81 00:04:40,950 --> 00:04:44,160 installed very easily on your computer. 82 00:04:44,160 --> 00:04:50,090 Or you can also use Bower, which I think is a Mac client. 83 00:04:50,090 --> 00:04:51,330 I've never used it. 84 00:04:51,330 --> 00:04:56,160 But there's a lot of ways that you can get Bootstrap on your computer 85 00:04:56,160 --> 00:04:57,960 and for your applications. 86 00:04:57,960 --> 00:05:02,400 I recommend just clicking the Download button and unzipping the folder. 87 00:05:02,400 --> 00:05:06,390 But whatever floats your boat. 88 00:05:06,390 --> 00:05:11,420 And in addition to the code that you'll get when you download it, 89 00:05:11,420 --> 00:05:14,000 which we'll go into in a second, you can also 90 00:05:14,000 --> 00:05:18,320 access a lot of templates and themes on the Bootstrap website. 91 00:05:18,320 --> 00:05:21,650 They won't be included in the precompiled folder. 92 00:05:21,650 --> 00:05:25,250 So you're going to want to poke around a little bit. 93 00:05:25,250 --> 00:05:27,082 It should be on the same download page. 94 00:05:27,082 --> 00:05:30,290 And you can see that they've already set up some sort of basic, cookie cutter 95 00:05:30,290 --> 00:05:34,550 frameworks for websites that you can use to help act 96 00:05:34,550 --> 00:05:38,180 as a springboard for your own projects, or sort of as an inspiration 97 00:05:38,180 --> 00:05:40,840 if you want. 98 00:05:40,840 --> 00:05:45,560 So here's a list of what happens when you download Bootstrap. 99 00:05:45,560 --> 00:05:50,610 I just used the website and put it onto my IDE. 100 00:05:50,610 --> 00:05:53,210 So you're going to see that there are three sets of folders. 101 00:05:53,210 --> 00:05:56,780 You have the CSS, the fonts, and the JS. 102 00:05:56,780 --> 00:06:03,290 So the way this is split up is there's the minified files, which is probably 103 00:06:03,290 --> 00:06:04,880 where you're going to want to use. 104 00:06:04,880 --> 00:06:09,110 And it includes all of the different functionality, 105 00:06:09,110 --> 00:06:16,160 all of the different libraries that are included in Bootstrap's CSS domain. 106 00:06:16,160 --> 00:06:23,810 So you will use the CSS as your style sheet, or the JS as your script. 107 00:06:23,810 --> 00:06:28,520 And the fonts, you can use on a case by case basis. 108 00:06:28,520 --> 00:06:30,800 I personally don't usually use their fonts. 109 00:06:30,800 --> 00:06:33,440 We'll go into how to deal with that later. 110 00:06:33,440 --> 00:06:38,180 But they can be useful if you want them. 111 00:06:38,180 --> 00:06:44,150 So first, we're going to go into how to set up your basic HTML with Bootstrap, 112 00:06:44,150 --> 00:06:46,400 and then go from there. 113 00:06:46,400 --> 00:06:52,990 So you've actually already used Bootstrap in layout.html 114 00:06:52,990 --> 00:06:55,280 in p-set seven. 115 00:06:55,280 --> 00:06:57,272 They used bootstrap to set up the website. 116 00:06:57,272 --> 00:06:58,730 That was sort of behind the scenes. 117 00:06:58,730 --> 00:07:00,920 So you didn't necessarily interact with it. 118 00:07:00,920 --> 00:07:07,100 But just as a fun aside, it's something that you've already sort of dealt with. 119 00:07:07,100 --> 00:07:10,190 So to get started, we're going to go over-- 120 00:07:10,190 --> 00:07:13,100 you're probably going to want to set up a boiler plate HTML 121 00:07:13,100 --> 00:07:20,060 template that has these specific call set ups so that you can use Bootstrap. 122 00:07:20,060 --> 00:07:24,080 You're going to want to put this in a folder for your project. 123 00:07:24,080 --> 00:07:28,700 You're going to need to do chmod, access permissions on the folder to make sure 124 00:07:28,700 --> 00:07:31,280 that Apache can deal with it. 125 00:07:31,280 --> 00:07:34,900 And then, just run it like you would any project. 126 00:07:34,900 --> 00:07:39,150 So use apache50, and then you should have it hosted directly for you 127 00:07:39,150 --> 00:07:44,390 on the IDE, which is really convenient. 128 00:07:44,390 --> 00:07:50,420 So first, we're going to look at what a header might 129 00:07:50,420 --> 00:07:53,460 look like in your template. 130 00:07:53,460 --> 00:07:59,900 So here, you're going to see the blue text says basically 131 00:07:59,900 --> 00:08:02,479 how you might include a bootstrap call. 132 00:08:02,479 --> 00:08:04,520 And this is something that you're going to set up 133 00:08:04,520 --> 00:08:10,990 in the beginning with all of your char set establishments, 134 00:08:10,990 --> 00:08:17,630 basically how the browser should read your code. 135 00:08:17,630 --> 00:08:21,660 So this is sort of a good way of calling Bootstrap. 136 00:08:21,660 --> 00:08:24,220 It's an easy set up. 137 00:08:24,220 --> 00:08:26,310 Sorry, those were flipped. 138 00:08:26,310 --> 00:08:31,580 So here, you're going to see that you have Bootstrap's CSS min as your style 139 00:08:31,580 --> 00:08:35,690 sheet, which is basically the way you're going to get access 140 00:08:35,690 --> 00:08:38,299 to all of the library functionality. 141 00:08:38,299 --> 00:08:43,370 You're also going to have a script as a bootstrap script. 142 00:08:43,370 --> 00:08:47,960 So this will give you access to pretty much anything in the library 143 00:08:47,960 --> 00:08:48,690 that you'll need. 144 00:08:48,690 --> 00:08:53,147 You'll also need your own CSS style sheet, probably. 145 00:08:53,147 --> 00:08:55,230 And that's something that you can add in addition. 146 00:08:55,230 --> 00:08:57,710 You can have more than one. 147 00:08:57,710 --> 00:08:59,990 But this is how you're going to want to set up 148 00:08:59,990 --> 00:09:05,870 at least the beginnings of your code so that you can use Bootstrap later. 149 00:09:05,870 --> 00:09:09,560 In the body portion of your HTML, you're going 150 00:09:09,560 --> 00:09:17,175 to want to add a couple calls just to use the plug-ins later. 151 00:09:17,175 --> 00:09:20,300 You can pretty much just copy and paste these at the beginning of the body. 152 00:09:20,300 --> 00:09:22,481 And it should be fine. 153 00:09:22,481 --> 00:09:26,060 154 00:09:26,060 --> 00:09:31,325 So now, I'm going to just talk a little bit about the basics of Bootstrap. 155 00:09:31,325 --> 00:09:33,950 And then, we're going to go into sort of the layout they set up 156 00:09:33,950 --> 00:09:40,280 for you, how you might implement a navigation bar as sort of a handy case 157 00:09:40,280 --> 00:09:41,360 study. 158 00:09:41,360 --> 00:09:45,680 And then, we'll talk about how they deal with text, 159 00:09:45,680 --> 00:09:48,380 how you might work on design with Bootstrap, 160 00:09:48,380 --> 00:09:54,530 and also how you can go forward towards asking questions and finding solutions 161 00:09:54,530 --> 00:09:57,900 to them on your own. 162 00:09:57,900 --> 00:10:01,670 So Bootstrap basics. 163 00:10:01,670 --> 00:10:06,120 With Bootstrap 3, it switched to sort of a mobile first framework. 164 00:10:06,120 --> 00:10:09,440 So what that means is that the mobile functionality is not 165 00:10:09,440 --> 00:10:11,120 separate from the rest of the library. 166 00:10:11,120 --> 00:10:13,089 Everything is integrated together. 167 00:10:13,089 --> 00:10:16,130 Everything that should work on your laptop should also work on your phone 168 00:10:16,130 --> 00:10:19,220 and be formatted accordingly, which is really handy. 169 00:10:19,220 --> 00:10:25,010 I'm not sure how many projects are going to incorporate web and mobile, sort 170 00:10:25,010 --> 00:10:27,170 of cross-platform development. 171 00:10:27,170 --> 00:10:29,930 But if you need to do that, whether for this project 172 00:10:29,930 --> 00:10:36,530 or for a project in the future, this is a really handy way of dealing with it. 173 00:10:36,530 --> 00:10:39,500 It's consistent across browsers. 174 00:10:39,500 --> 00:10:42,440 It's supported by all the major browsers. 175 00:10:42,440 --> 00:10:46,340 I think there's some functionality that doesn't work on Internet Explorer. 176 00:10:46,340 --> 00:10:49,040 177 00:10:49,040 --> 00:10:51,200 So maybe don't use that when you're developing. 178 00:10:51,200 --> 00:10:55,237 But Firefox, Chrome, Safari should all be fine. 179 00:10:55,237 --> 00:10:59,090 180 00:10:59,090 --> 00:11:03,770 It's convenient in that it has the plug-ins all in one place for you. 181 00:11:03,770 --> 00:11:06,020 So you don't have to call a million different scripts. 182 00:11:06,020 --> 00:11:08,510 You can just sort of call those two or three 183 00:11:08,510 --> 00:11:12,050 that we set up at the beginning of the code, which is nice. 184 00:11:12,050 --> 00:11:14,540 And it's customizable. 185 00:11:14,540 --> 00:11:19,550 So as I said before, they have this library of functions that you can use. 186 00:11:19,550 --> 00:11:23,360 But if you want to change the colors, if you 187 00:11:23,360 --> 00:11:25,550 want to change the way a button looks, if you 188 00:11:25,550 --> 00:11:30,330 want to sort of turn something on its head, you can still do that. 189 00:11:30,330 --> 00:11:34,210 It's not a cookie cutter, like you have this specific button, 190 00:11:34,210 --> 00:11:37,610 and you have to use it in your code. 191 00:11:37,610 --> 00:11:40,910 So this is easier to deal with, or at least 192 00:11:40,910 --> 00:11:45,170 to see how you might want to change things with the full code, not 193 00:11:45,170 --> 00:11:46,220 the minified version. 194 00:11:46,220 --> 00:11:49,100 But it's definitely still manageable. 195 00:11:49,100 --> 00:11:55,940 And that's where your own CSS or JavaScript will come into play. 196 00:11:55,940 --> 00:11:59,210 So yeah, as I said, this just does a lot of the work for you 197 00:11:59,210 --> 00:12:02,760 and gets you developing faster. 198 00:12:02,760 --> 00:12:06,440 So one of the main features that Bootstrap sets up 199 00:12:06,440 --> 00:12:08,810 for you is this grid layout. 200 00:12:08,810 --> 00:12:13,500 And basically what that means is that it sets up a bunch of different columns 201 00:12:13,500 --> 00:12:17,400 that make up your page, whether that's on your phone or your computer. 202 00:12:17,400 --> 00:12:20,360 It doesn't really matter. 203 00:12:20,360 --> 00:12:24,200 And it deals with the most important content first. 204 00:12:24,200 --> 00:12:29,540 So basically, you set up what content needs to be displayed right now. 205 00:12:29,540 --> 00:12:32,390 This is probably more applicable on your phone or something. 206 00:12:32,390 --> 00:12:36,110 But for different browser window sizes, you 207 00:12:36,110 --> 00:12:39,410 specify sort of what content is most important, and needs 208 00:12:39,410 --> 00:12:43,110 to be priority in displaying, and then as it goes down, 209 00:12:43,110 --> 00:12:49,010 the content that maybe can be shifted to if you scroll down to see it. 210 00:12:49,010 --> 00:12:51,740 In addition to columns, you have rows. 211 00:12:51,740 --> 00:12:53,870 So they're used. 212 00:12:53,870 --> 00:12:56,900 They have padding built in. 213 00:12:56,900 --> 00:13:00,800 They set up so that you can have dividers on your page, 214 00:13:00,800 --> 00:13:02,669 so it's not just one giant column screen. 215 00:13:02,669 --> 00:13:03,710 You can have the heading. 216 00:13:03,710 --> 00:13:08,870 You can have a primary drop page. 217 00:13:08,870 --> 00:13:12,090 Then, you can scroll down and maybe get to a different row on something else, 218 00:13:12,090 --> 00:13:15,080 features for your site. 219 00:13:15,080 --> 00:13:17,240 One important thing to remember about rows 220 00:13:17,240 --> 00:13:22,790 is that the only thing-- you can't have a row nested inside of a row directly. 221 00:13:22,790 --> 00:13:26,090 You need to put at least a row, have a row as your parent, 222 00:13:26,090 --> 00:13:29,690 and then a column, and then another row. 223 00:13:29,690 --> 00:13:32,090 Just because of the way the containers and padding 224 00:13:32,090 --> 00:13:35,990 works out in the Bootstrap code. 225 00:13:35,990 --> 00:13:39,439 One problem with columns is that there are-- well, 226 00:13:39,439 --> 00:13:40,730 it's not necessarily a problem. 227 00:13:40,730 --> 00:13:43,550 But there are gutters between them. 228 00:13:43,550 --> 00:13:49,550 So they have about 15 points on each side of your column content 229 00:13:49,550 --> 00:13:53,710 that is set aside just as blank space. 230 00:13:53,710 --> 00:13:56,580 This is usually not a problem at all, right? 231 00:13:56,580 --> 00:13:58,940 Because you want to have some space between your text, 232 00:13:58,940 --> 00:14:01,580 or your pictures or whatever you're dealing with. 233 00:14:01,580 --> 00:14:05,690 But if it becomes a problem for you, if you need something directly adjacent, 234 00:14:05,690 --> 00:14:10,970 that is when you might go into the bootstrap code 235 00:14:10,970 --> 00:14:12,020 and change things around. 236 00:14:12,020 --> 00:14:18,410 Or you might change them in your own CSS. 237 00:14:18,410 --> 00:14:23,640 So just looking at how the grid plays out on different platforms, 238 00:14:23,640 --> 00:14:28,370 so you've got phones, tablets, smaller computers like a laptop, or maybe 239 00:14:28,370 --> 00:14:32,220 larger computers like a big desktop. 240 00:14:32,220 --> 00:14:42,290 So the way it plays out with the layout is on a phone, it doesn't collapse. 241 00:14:42,290 --> 00:14:46,040 The main content just stays pretty static. 242 00:14:46,040 --> 00:14:52,670 With tablets and laptops and desktops, what will happen is the content 243 00:14:52,670 --> 00:14:55,580 will sort of like come into being as you scroll, 244 00:14:55,580 --> 00:15:01,850 or collapse as it needs to happen, which is kind of cool. 245 00:15:01,850 --> 00:15:08,780 For container width, it just sets up maximums based on different platforms. 246 00:15:08,780 --> 00:15:11,410 I don't recommend going against these guidelines. 247 00:15:11,410 --> 00:15:14,120 They are meant to help you make sure that things 248 00:15:14,120 --> 00:15:18,250 are seen the way you want them to be. 249 00:15:18,250 --> 00:15:23,330 And the way those will manifest is in the type of columns you use. 250 00:15:23,330 --> 00:15:27,860 So as you can see at the bottom, there's extra small, small, medium, 251 00:15:27,860 --> 00:15:30,250 and large columns established for you. 252 00:15:30,250 --> 00:15:33,860 And that's where those container widths come into play. 253 00:15:33,860 --> 00:15:37,480 And those, you can mix and match. 254 00:15:37,480 --> 00:15:41,840 You don't have to only use large ones for large desktops. 255 00:15:41,840 --> 00:15:44,650 But the idea is that the largest one you can use on a phone 256 00:15:44,650 --> 00:15:46,370 is the small, the extra small. 257 00:15:46,370 --> 00:15:48,610 The largest you can use on a tablet is the small. 258 00:15:48,610 --> 00:15:50,424 And you can go from there. 259 00:15:50,424 --> 00:15:56,050 260 00:15:56,050 --> 00:15:59,740 So column and grid tips and tricks. 261 00:15:59,740 --> 00:16:06,310 If you want to use offset, basically so what this will do 262 00:16:06,310 --> 00:16:10,330 is if you have a bunch of columns on top of each other 263 00:16:10,330 --> 00:16:12,520 that are maybe different lengths, so you have 264 00:16:12,520 --> 00:16:15,580 one column on the right that's super long, and then a short column 265 00:16:15,580 --> 00:16:16,860 right below it. 266 00:16:16,860 --> 00:16:18,564 And you have two columns on the left. 267 00:16:18,564 --> 00:16:21,730 But you want the second column on the left to be lined up with the short one 268 00:16:21,730 --> 00:16:23,800 on the bottom of the right. 269 00:16:23,800 --> 00:16:26,440 You can use offset just to make sure it doesn't have 270 00:16:26,440 --> 00:16:28,750 the two on the left right at the top. 271 00:16:28,750 --> 00:16:32,529 And then, have an uneven distribution. 272 00:16:32,529 --> 00:16:35,320 And the little stars there just mean what size you're dealing with, 273 00:16:35,320 --> 00:16:37,900 so extra small, small. 274 00:16:37,900 --> 00:16:40,540 So that's not too crazy. 275 00:16:40,540 --> 00:16:48,760 You can also have a class distinction saying clearfix visible. 276 00:16:48,760 --> 00:16:51,400 So in this case, it was for extra small. 277 00:16:51,400 --> 00:16:55,150 And that makes sure that the columns basically just 278 00:16:55,150 --> 00:16:59,110 don't overlap at all, which is convenient. 279 00:16:59,110 --> 00:16:59,770 I recommend it. 280 00:16:59,770 --> 00:17:03,070 Maybe you want some overlap depending on what you're doing for your project, 281 00:17:03,070 --> 00:17:06,609 if you want maybe a picture behind some text, that's 282 00:17:06,609 --> 00:17:08,410 sort of where you might want overlap. 283 00:17:08,410 --> 00:17:14,140 But in most examples, this is going to be a useful feature for you. 284 00:17:14,140 --> 00:17:16,420 And you can see below that sort of an example 285 00:17:16,420 --> 00:17:21,700 of how you might have a row set up inside of a container, 286 00:17:21,700 --> 00:17:24,876 and how the row will have column as its children. 287 00:17:24,876 --> 00:17:29,245 288 00:17:29,245 --> 00:17:31,330 So now we're going to shift gears a little bit 289 00:17:31,330 --> 00:17:36,500 and go on to how you might implement a navigation bar. 290 00:17:36,500 --> 00:17:40,075 Which if we're thinking about it in the Bootstrap grid framework, 291 00:17:40,075 --> 00:17:43,270 it's pretty much just a row container set up 292 00:17:43,270 --> 00:17:46,600 with a bunch of different columns dividing up 293 00:17:46,600 --> 00:17:49,430 what you would put in that row. 294 00:17:49,430 --> 00:17:51,790 So maybe you have a Home button, and a Menu button, 295 00:17:51,790 --> 00:17:56,690 and an Order button if you're making a food delivery website. 296 00:17:56,690 --> 00:18:01,990 But Bootstrap sort of anticipates this and gives you a lot more functionality 297 00:18:01,990 --> 00:18:05,940 than you just having to use columns and then write out 298 00:18:05,940 --> 00:18:11,300 all of the code to deal with buttons and links and things. 299 00:18:11,300 --> 00:18:13,750 So when you're using Bootstrap on mobile, 300 00:18:13,750 --> 00:18:17,860 it collapses the menu of the navigation bar automatically for you. 301 00:18:17,860 --> 00:18:21,140 So you'll have the little tab button in the corner. 302 00:18:21,140 --> 00:18:25,547 And you can click on it if you want to go to a different page, which 303 00:18:25,547 --> 00:18:28,630 I'm sure if any of you have tried to go to a website before on your phone, 304 00:18:28,630 --> 00:18:31,580 you know what I mean. 305 00:18:31,580 --> 00:18:36,070 And you can set up that sort of same collapse on other platforms, 306 00:18:36,070 --> 00:18:39,850 for tablets or laptops or desktops, if you want to. 307 00:18:39,850 --> 00:18:40,960 That's up to you. 308 00:18:40,960 --> 00:18:45,130 A lot of times, you will just fix the navigation bar at the top of the page. 309 00:18:45,130 --> 00:18:46,900 And as you scroll down, it'll stay there. 310 00:18:46,900 --> 00:18:49,180 But again, you can sort of decide. 311 00:18:49,180 --> 00:18:50,980 That's what's so great about Bootstrap is 312 00:18:50,980 --> 00:18:55,730 it lets you choose what you want to do. 313 00:18:55,730 --> 00:18:59,895 You can also sort of rigidly lock in place, like I just said, 314 00:18:59,895 --> 00:19:02,020 if you don't want to do the collapse functionality. 315 00:19:02,020 --> 00:19:04,550 And Bootstrap handles that for you. 316 00:19:04,550 --> 00:19:08,920 So you don't have to deal with making sure none of the body content 317 00:19:08,920 --> 00:19:13,690 interferes with it, or other header content interferes with the navigation 318 00:19:13,690 --> 00:19:15,580 bar at all. 319 00:19:15,580 --> 00:19:19,510 And you can also very easily integrate things like a search box 320 00:19:19,510 --> 00:19:25,150 into your navigation bar instead of trying to put a complicated form 321 00:19:25,150 --> 00:19:28,510 inside of a link. 322 00:19:28,510 --> 00:19:30,250 So this is helpful for that. 323 00:19:30,250 --> 00:19:35,537 So we're going to go into the nitty gritty details of all 324 00:19:35,537 --> 00:19:38,990 of how to implement that right now. 325 00:19:38,990 --> 00:19:45,940 So the way you might divide up sort of the categories of work 326 00:19:45,940 --> 00:19:50,960 that you do on a navigation bar, you have your header, 327 00:19:50,960 --> 00:19:55,340 which you'll assign a role to, which will make more sense when 328 00:19:55,340 --> 00:19:57,580 we look at the code in a sec. 329 00:19:57,580 --> 00:20:00,790 But basically, that's just in addition to defining your class, 330 00:20:00,790 --> 00:20:03,200 you define the role as navigation. 331 00:20:03,200 --> 00:20:06,280 And that helps Bootstrap know that what you're trying to implement 332 00:20:06,280 --> 00:20:09,310 is a navigation bar. 333 00:20:09,310 --> 00:20:14,020 Then, you're going to have the different categories on your navigation bar, 334 00:20:14,020 --> 00:20:17,110 the Home, the Menu, the Order Online. 335 00:20:17,110 --> 00:20:19,060 It's going to be set up like an ordered list, 336 00:20:19,060 --> 00:20:25,720 just like you would do if you were writing the CSS and HTML yourself. 337 00:20:25,720 --> 00:20:28,439 And then, you'll define that class in a specific way 338 00:20:28,439 --> 00:20:29,980 to use the Bootstrap functionalities. 339 00:20:29,980 --> 00:20:33,340 So that's .nav and .navbar-nav. 340 00:20:33,340 --> 00:20:37,060 So this again is just keying Bootstrap into the idea 341 00:20:37,060 --> 00:20:41,380 of how you should format it, get rid of the bullets, center them 342 00:20:41,380 --> 00:20:45,040 probably in the divisions, make sure everything looks pretty. 343 00:20:45,040 --> 00:20:50,170 So this is sort of handling a lot of the trouble for you. 344 00:20:50,170 --> 00:20:53,290 If you want to have a drop down feature in your navigation bar, 345 00:20:53,290 --> 00:20:57,400 so let's say one or more than one of the links 346 00:20:57,400 --> 00:21:01,750 have options, so if you were doing a clothing website, 347 00:21:01,750 --> 00:21:04,930 you might have women's clothing, and then dresses, or sweaters, 348 00:21:04,930 --> 00:21:09,670 or something, or men's clothing, and then belts or shirts. 349 00:21:09,670 --> 00:21:12,790 You can set up drop down functionality, as well. 350 00:21:12,790 --> 00:21:16,690 And then, you just say class equals dropdown-menu. 351 00:21:16,690 --> 00:21:21,447 So it's very straightforward, pretty intuitive. 352 00:21:21,447 --> 00:21:23,530 For stuff like this if you're working on your own, 353 00:21:23,530 --> 00:21:28,690 you would want to probably look up online just what calls to make. 354 00:21:28,690 --> 00:21:33,940 But a lot of the stuff that you're going to want to do is set up for you. 355 00:21:33,940 --> 00:21:36,910 So for the header, like I said before, you're 356 00:21:36,910 --> 00:21:40,300 going to set up role to be navigation. 357 00:21:40,300 --> 00:21:45,760 And you're going to call the class usually navbar-default. 358 00:21:45,760 --> 00:21:48,640 If you set up anything else in your CSS, you'll 359 00:21:48,640 --> 00:21:50,980 add probably more distinctions there. 360 00:21:50,980 --> 00:21:56,350 But that's how you get access to Bootstrap's layout. 361 00:21:56,350 --> 00:21:58,510 And then, you'll see you're going to want 362 00:21:58,510 --> 00:22:01,120 to set up a header for the nav bar. 363 00:22:01,120 --> 00:22:05,680 And that'll just be the main link for the page. 364 00:22:05,680 --> 00:22:09,460 So whatever the title of it is, it'll be formatted slightly differently. 365 00:22:09,460 --> 00:22:10,870 And you can include your link. 366 00:22:10,870 --> 00:22:12,870 So in this case, it would be called CS50. 367 00:22:12,870 --> 00:22:15,700 368 00:22:15,700 --> 00:22:21,130 Going on to sort of the divisions within your navigation bar, 369 00:22:21,130 --> 00:22:25,540 you're going to have an unordered list, which is pretty standard. 370 00:22:25,540 --> 00:22:30,070 Again, you have the class equals your nav and navbar-nav, including 371 00:22:30,070 --> 00:22:33,970 whatever CSS you might want. 372 00:22:33,970 --> 00:22:39,205 So here, you can set up different links just normally in an unordered list, 373 00:22:39,205 --> 00:22:44,000 and it will know how to format them accordingly. 374 00:22:44,000 --> 00:22:47,390 Drop down is a little trickier. 375 00:22:47,390 --> 00:22:52,540 So you're going to put an unordered list inside of the larger unordered list 376 00:22:52,540 --> 00:22:53,990 of categories. 377 00:22:53,990 --> 00:22:58,540 So as you can see here, we're having our list item 378 00:22:58,540 --> 00:23:01,090 which we're defining as class drop down so that Bootstrap 379 00:23:01,090 --> 00:23:03,790 knows what to do with it. 380 00:23:03,790 --> 00:23:08,240 And it's called schools, for example, on this CS50 page. 381 00:23:08,240 --> 00:23:13,630 So here, we're looking at-- with the link, 382 00:23:13,630 --> 00:23:17,720 you establish downdown-toggle and data-toggle as dropdown. 383 00:23:17,720 --> 00:23:20,950 Again, this is just keying Bootstrap into the idea of how 384 00:23:20,950 --> 00:23:24,940 it should deal with the following code. 385 00:23:24,940 --> 00:23:28,990 Then, when you're done with that link, you just have an unordered list. 386 00:23:28,990 --> 00:23:32,125 You don't have to deal with more formatting than that. 387 00:23:32,125 --> 00:23:34,000 Bootstrap will handle that for you. 388 00:23:34,000 --> 00:23:36,070 And then, you call that your dropdown menu. 389 00:23:36,070 --> 00:23:37,870 And then, include the list accordingly. 390 00:23:37,870 --> 00:23:40,745 So you could have dropdowns inside of dropdowns, inside of dropdowns. 391 00:23:40,745 --> 00:23:42,610 There's not really an end to it. 392 00:23:42,610 --> 00:23:45,520 It just depends on what you need it to be. 393 00:23:45,520 --> 00:23:51,550 And then, you end the smaller unordered list, and you can end the list. 394 00:23:51,550 --> 00:23:58,120 One fun thing you can do is include a caret, which is just an item. 395 00:23:58,120 --> 00:24:01,870 You'll say class equals caret, for like a dropdown arrow. 396 00:24:01,870 --> 00:24:04,570 So if you want to have the little triangle that says, 397 00:24:04,570 --> 00:24:07,570 oh, click down to see that it's a drop down, 398 00:24:07,570 --> 00:24:15,840 you would include that on the href for the schools, or your top link, 399 00:24:15,840 --> 00:24:20,800 so basically that it knows to include the little symbol there. 400 00:24:20,800 --> 00:24:23,440 Which is kind of fun. 401 00:24:23,440 --> 00:24:26,920 So additional navigation bar features that I talked about a little bit 402 00:24:26,920 --> 00:24:30,820 before, we have optional collapse. 403 00:24:30,820 --> 00:24:33,744 So on mobile, collapse is standard. 404 00:24:33,744 --> 00:24:35,410 You don't really have an option on that. 405 00:24:35,410 --> 00:24:40,870 You could change it if you wanted to, but that would-- you 406 00:24:40,870 --> 00:24:44,420 might not want to be using Bootstrap's nav bar for this. 407 00:24:44,420 --> 00:24:46,420 You might want to use some other button features 408 00:24:46,420 --> 00:24:49,660 and then set them up on your own. 409 00:24:49,660 --> 00:24:54,880 But if you wanted to collapse a tablet, or laptop, or a desktop application 410 00:24:54,880 --> 00:24:57,970 for their navigation bar, you would just set up 411 00:24:57,970 --> 00:25:03,010 a division on the division you're setting up for, the nav bar. 412 00:25:03,010 --> 00:25:06,130 And you say class equals collapse, navbar-collapse. 413 00:25:06,130 --> 00:25:09,290 And then, it knows that you want it collapsed when you're operating 414 00:25:09,290 --> 00:25:11,770 the page, which is pretty cool. 415 00:25:11,770 --> 00:25:17,425 And so this is coming all before your list, but after the header. 416 00:25:17,425 --> 00:25:21,150 417 00:25:21,150 --> 00:25:23,760 So another feature we talked about was if you 418 00:25:23,760 --> 00:25:27,720 want to fix the navigation bar to the top of the page. 419 00:25:27,720 --> 00:25:31,710 And once again, you just call the bootstrap library and say, 420 00:25:31,710 --> 00:25:38,670 navbar-fixed-top, which is kind of stiff but gets the job done. 421 00:25:38,670 --> 00:25:42,630 So here, you can see an example of adding navbar-fixed-top 422 00:25:42,630 --> 00:25:45,620 to the initial class distinctions we gave navbar 423 00:25:45,620 --> 00:25:52,230 with navbar and navbar-default. And this will sort of lock it at the top 424 00:25:52,230 --> 00:25:54,879 and make sure that it doesn't move. 425 00:25:54,879 --> 00:25:56,670 One thing you're going to want to watch out 426 00:25:56,670 --> 00:25:59,280 for if you do take advantage of this feature 427 00:25:59,280 --> 00:26:06,720 is you'll want to add some padding at the top of your body of the HTML, 428 00:26:06,720 --> 00:26:10,140 whatever your body content is for the page. 429 00:26:10,140 --> 00:26:15,120 Because with the fixed top, sometimes it might overlap and cover 430 00:26:15,120 --> 00:26:17,160 some of the content you're trying to display. 431 00:26:17,160 --> 00:26:21,850 So making sure you add at least probably 50 points, maybe more. 432 00:26:21,850 --> 00:26:26,310 But you can also go on percentages if that looks better for you. 433 00:26:26,310 --> 00:26:31,241 We'll make sure that the content is being displayed clearly. 434 00:26:31,241 --> 00:26:34,020 435 00:26:34,020 --> 00:26:36,810 Another feature you can add is the search form. 436 00:26:36,810 --> 00:26:40,530 So Bootstrap has a lot of form classes set up 437 00:26:40,530 --> 00:26:43,950 for you, which you could use if you wanted to. 438 00:26:43,950 --> 00:26:47,430 But an easier way of doing things is they specifically designed 439 00:26:47,430 --> 00:26:49,410 a navbar form. 440 00:26:49,410 --> 00:26:53,490 So here, you just add the form class as navbar-form. 441 00:26:53,490 --> 00:26:55,440 And for an example, you could do search. 442 00:26:55,440 --> 00:26:59,100 There are a bunch of different options for different forms you might have. 443 00:26:59,100 --> 00:27:01,600 But if you wanted a search bar for the website, for example, 444 00:27:01,600 --> 00:27:05,110 this is how they would set it up for you. 445 00:27:05,110 --> 00:27:09,510 And it'll include the little magnifying glass icon, and it'll say "Search," 446 00:27:09,510 --> 00:27:13,140 and it will have gray text, and it'll look pretty. 447 00:27:13,140 --> 00:27:16,860 And it will sort of deal with that. 448 00:27:16,860 --> 00:27:19,780 So here, you'll see an example of that. 449 00:27:19,780 --> 00:27:22,560 So you have your form class with role of search. 450 00:27:22,560 --> 00:27:25,590 You're still going to call it navbar-form, as I said. 451 00:27:25,590 --> 00:27:32,760 navbar-left, I think, is just where the text is in the box. 452 00:27:32,760 --> 00:27:35,640 And then, you have your form-control. 453 00:27:35,640 --> 00:27:38,160 You still set the placeholder. 454 00:27:38,160 --> 00:27:42,480 And then, a button type is just a Submit button if you want. 455 00:27:42,480 --> 00:27:48,270 Again, this is sort of part of what Bootstrap sets up for buttons for you. 456 00:27:48,270 --> 00:27:52,150 And that's why it's btn and btn-default. 457 00:27:52,150 --> 00:27:54,660 We're not really going to go into buttons right now, 458 00:27:54,660 --> 00:27:58,016 but that is functionality that Bootstrap does for you. 459 00:27:58,016 --> 00:28:00,957 460 00:28:00,957 --> 00:28:02,790 Now, we're going to shift gears a little bit 461 00:28:02,790 --> 00:28:05,520 and talk about how Bootstrap deals with text. 462 00:28:05,520 --> 00:28:07,830 So a lot of you are probably going to have 463 00:28:07,830 --> 00:28:12,810 maybe at least some blocks of text, if not at least headings 464 00:28:12,810 --> 00:28:16,980 or subheadings, on applications that you're developing. 465 00:28:16,980 --> 00:28:21,210 So bootstrap sort of styles the headers for you. 466 00:28:21,210 --> 00:28:25,830 So if you set h1 or h2, it has already formatted 467 00:28:25,830 --> 00:28:27,870 those in a pretty convenient way. 468 00:28:27,870 --> 00:28:30,360 Obviously, you can modify the way they'll look. 469 00:28:30,360 --> 00:28:35,430 But they'll be prettier than the standard I'm just calling HTML h1, 470 00:28:35,430 --> 00:28:38,300 and it's very large, which is nice. 471 00:28:38,300 --> 00:28:40,560 The subheadings, they changed the color. 472 00:28:40,560 --> 00:28:44,899 So if you're-- I think the standard is to be like a gray. 473 00:28:44,899 --> 00:28:47,190 So the headings will be black, and then the subheadings 474 00:28:47,190 --> 00:28:51,380 will be gray, which is just a nice way of looking at it. 475 00:28:51,380 --> 00:28:56,130 There are also some tags you can use if you're doing very precisely 476 00:28:56,130 --> 00:29:00,090 formatted text that you don't want to deal with the spacing or the lines for. 477 00:29:00,090 --> 00:29:04,710 So the address tag, you can put a mailing address inside of. 478 00:29:04,710 --> 00:29:08,340 And it will do the new lines and space it out, 479 00:29:08,340 --> 00:29:14,520 make sure it's justified correctly, which is a very nice thing. 480 00:29:14,520 --> 00:29:16,260 It bolds things and italicizes it. 481 00:29:16,260 --> 00:29:18,647 It does just a standard mailing address for you. 482 00:29:18,647 --> 00:29:21,730 So obviously, this is something you could probably figure out on your own. 483 00:29:21,730 --> 00:29:22,980 But it might take you a while. 484 00:29:22,980 --> 00:29:24,870 And Bootstrap has already done it for you. 485 00:29:24,870 --> 00:29:28,590 So again, that's sort of a reason why you might want to use it. 486 00:29:28,590 --> 00:29:31,020 You can also use the abbreviation tag. 487 00:29:31,020 --> 00:29:35,760 And so what this does is if you're including an acronym 488 00:29:35,760 --> 00:29:38,730 or something in your text and maybe you want 489 00:29:38,730 --> 00:29:41,940 to include a definition for that acronym, 490 00:29:41,940 --> 00:29:46,320 for people who don't know what it is, or just some indication that it 491 00:29:46,320 --> 00:29:53,640 is an acronym, you can use the abbreviation tag. 492 00:29:53,640 --> 00:29:56,890 And that gives it the little dotted line underneath. 493 00:29:56,890 --> 00:29:58,890 And if you scroll over it, it'll either give you 494 00:29:58,890 --> 00:30:05,610 a question mark, which is kind of funny, or the definition if you provided one. 495 00:30:05,610 --> 00:30:08,130 Bootstrap also provides really nice features 496 00:30:08,130 --> 00:30:13,860 on displaying code in the body of your website. 497 00:30:13,860 --> 00:30:15,104 Excuse me. 498 00:30:15,104 --> 00:30:18,420 [COUGHS] Sorry. 499 00:30:18,420 --> 00:30:21,288 So you just use the code tag. 500 00:30:21,288 --> 00:30:23,340 And then, it formats it. 501 00:30:23,340 --> 00:30:26,140 It'll put it in a different color. 502 00:30:26,140 --> 00:30:27,340 The text is usually red. 503 00:30:27,340 --> 00:30:30,430 It'll put it in some sort of fixed width font for you. 504 00:30:30,430 --> 00:30:36,610 It makes it look like standard, readable code, which is really great. 505 00:30:36,610 --> 00:30:40,180 One thing you're going to want to do is with the tags, 506 00:30:40,180 --> 00:30:46,120 you're going to need to incorporate additional information on that so 507 00:30:46,120 --> 00:30:50,020 that they know where you're starting and where you're ending, like in case you 508 00:30:50,020 --> 00:30:55,210 were to use the word code in your code. 509 00:30:55,210 --> 00:30:59,480 It's just a way of ensuring that you're displaying everything correctly. 510 00:30:59,480 --> 00:31:03,040 So the start, you'll just do ampersand L-T semi-colon. 511 00:31:03,040 --> 00:31:07,150 And then, at the end, you do ampersand G-T semi-colon, sorry, 512 00:31:07,150 --> 00:31:11,080 I forgot that in the slide, and then the ending tag. 513 00:31:11,080 --> 00:31:17,830 So really nice way of writing code on a website if you need that. 514 00:31:17,830 --> 00:31:24,070 But again, it's whatever you need it to be. 515 00:31:24,070 --> 00:31:28,210 Bootstrap's default fonts go in order. 516 00:31:28,210 --> 00:31:31,250 The way CSS deals with fonts is it looks for the first one. 517 00:31:31,250 --> 00:31:33,250 And if it can't find it, it goes to the next one 518 00:31:33,250 --> 00:31:36,590 and keeps going until it gets to the end. 519 00:31:36,590 --> 00:31:41,170 So here, your ideal is Helvetica Neue, then it goes on to Helvetica, Arial, 520 00:31:41,170 --> 00:31:43,930 and then sans serif. 521 00:31:43,930 --> 00:31:47,650 That's just the way all of their text is set up. 522 00:31:47,650 --> 00:31:51,850 You can obviously change that if you don't want to use these fonts. 523 00:31:51,850 --> 00:31:55,220 So you can either use Bootstrap's stored fonts. 524 00:31:55,220 --> 00:31:59,980 Or you can just go to Google Fonts and include the link 525 00:31:59,980 --> 00:32:06,310 that they give you to embed this line of code and include it in your CSS page 526 00:32:06,310 --> 00:32:10,870 that you want to start with whatever new font you have. 527 00:32:10,870 --> 00:32:13,110 But that's just the way Bootstrap sets it 528 00:32:13,110 --> 00:32:15,160 up so that it's not super ugly if you don't 529 00:32:15,160 --> 00:32:17,838 provide any formatting on your text. 530 00:32:17,838 --> 00:32:20,740 531 00:32:20,740 --> 00:32:23,770 So now, we're going to look at what if you have a question? 532 00:32:23,770 --> 00:32:28,900 What if you want to include a button, or a particular method of scrolling, 533 00:32:28,900 --> 00:32:34,450 or anything that I have not gone into, which is a lot? 534 00:32:34,450 --> 00:32:37,570 How should you approach that in relation to Bootstrap 535 00:32:37,570 --> 00:32:39,820 and the Bootstrap community? 536 00:32:39,820 --> 00:32:44,605 So there's a couple steps that I wrote up. 537 00:32:44,605 --> 00:32:47,380 I think they're also pretty applicable for other questions you 538 00:32:47,380 --> 00:32:49,000 might have not related to Bootstrap. 539 00:32:49,000 --> 00:32:51,730 So while you're working on your projects, 540 00:32:51,730 --> 00:32:58,147 you'll have a lot less innate support from things like office hours, right? 541 00:32:58,147 --> 00:32:59,980 There'll be a couple nights of office hours, 542 00:32:59,980 --> 00:33:03,590 but maybe not all the TAs know exactly what you're working on. 543 00:33:03,590 --> 00:33:08,810 So this is going to be a test to see how you can find answers for yourself. 544 00:33:08,810 --> 00:33:11,380 And I think this is a pretty good framework for doing that. 545 00:33:11,380 --> 00:33:15,940 So first, obviously, figure out what you want. 546 00:33:15,940 --> 00:33:22,190 If for example it's buttons, that's just a convenient example, then great. 547 00:33:22,190 --> 00:33:24,310 If it's something maybe more complicated, 548 00:33:24,310 --> 00:33:29,380 then it might take you longer to figure out what you want. 549 00:33:29,380 --> 00:33:32,243 For example, I really like parallax scrolling. 550 00:33:32,243 --> 00:33:35,243 I know it's kind of overrated now, but I still think it's really pretty. 551 00:33:35,243 --> 00:33:38,020 552 00:33:38,020 --> 00:33:40,270 But for a long time, I didn't know what it was called. 553 00:33:40,270 --> 00:33:44,770 So I would just Google obsessively, pretty background scrolling, 554 00:33:44,770 --> 00:33:47,590 and what scrolling does Spotify use? 555 00:33:47,590 --> 00:33:50,590 Because the Spotify page had it for a while. 556 00:33:50,590 --> 00:33:54,230 It took me a while to figure out that it was called parallax. 557 00:33:54,230 --> 00:33:58,450 So for more complicated or less obvious functions 558 00:33:58,450 --> 00:34:02,170 you might be trying to incorporate, it may take you a little while 559 00:34:02,170 --> 00:34:05,540 to figure out what questions to ask. 560 00:34:05,540 --> 00:34:09,880 So once you know what you're looking for, a good rule of thumb 561 00:34:09,880 --> 00:34:11,650 is to try to find an example. 562 00:34:11,650 --> 00:34:18,260 So this is going to depend on how you are approaching this problem. 563 00:34:18,260 --> 00:34:21,420 If you see something you like and then you want to use it, 564 00:34:21,420 --> 00:34:23,050 there you have your example already. 565 00:34:23,050 --> 00:34:25,690 If you know a website that's incorporating something you like, 566 00:34:25,690 --> 00:34:28,510 you can go look there. 567 00:34:28,510 --> 00:34:30,940 You can also look at the bootstrap templates. 568 00:34:30,940 --> 00:34:34,750 And there's a lot of online resources for Bootstrap themes. 569 00:34:34,750 --> 00:34:38,540 And these can be great ways to see what Bootstrap 570 00:34:38,540 --> 00:34:43,960 can do for you pretty explicitly, but also you 571 00:34:43,960 --> 00:34:46,854 should not be limited just to the Bootstrap functionality that 572 00:34:46,854 --> 00:34:47,770 already exists, right? 573 00:34:47,770 --> 00:34:50,230 You're going to want to use this as a springboard 574 00:34:50,230 --> 00:34:53,239 and go off and do your own thing. 575 00:34:53,239 --> 00:34:57,910 So if you can find an example, one thing you can do is view page source, right? 576 00:34:57,910 --> 00:35:01,030 So you right click and view page source. 577 00:35:01,030 --> 00:35:04,540 Or check the source code if it's a template online, 578 00:35:04,540 --> 00:35:06,730 and just see how they implement it. 579 00:35:06,730 --> 00:35:09,130 And probably won't be perfect for what you want, 580 00:35:09,130 --> 00:35:14,260 but it'll be a good baseline for how you might go about incorporating 581 00:35:14,260 --> 00:35:18,640 a similar function in your app. 582 00:35:18,640 --> 00:35:22,690 If you don't find an example, or you just 583 00:35:22,690 --> 00:35:29,275 don't really think it's worthwhile to look for one, look at StackOverflow. 584 00:35:29,275 --> 00:35:29,900 Look at Google. 585 00:35:29,900 --> 00:35:30,700 Look at forums. 586 00:35:30,700 --> 00:35:34,510 Look at the Bootstrap help pages. 587 00:35:34,510 --> 00:35:38,660 Bootstrap is pretty unique in that there's a lot of beginning developers, 588 00:35:38,660 --> 00:35:43,450 or developers who maybe aren't familiar with Bootstrap's library. 589 00:35:43,450 --> 00:35:47,890 Maybe they're a little confused since the library is very extensive. 590 00:35:47,890 --> 00:35:50,330 So that combination sort of creates a perfect storm 591 00:35:50,330 --> 00:35:53,570 with lots of forums, lots of questions, lots 592 00:35:53,570 --> 00:35:59,630 of developers who maybe know the answers and can help along newer users. 593 00:35:59,630 --> 00:36:03,280 So there is a lot of support for Bootstrap online. 594 00:36:03,280 --> 00:36:08,990 So this is a great way of finding help for problems you might have. 595 00:36:08,990 --> 00:36:11,240 If you have a very obscure question, and let's say 596 00:36:11,240 --> 00:36:14,600 you can't find it on StackOverflow, you can't find a good example of it, 597 00:36:14,600 --> 00:36:16,880 you're pretty stuck. 598 00:36:16,880 --> 00:36:20,470 This is where you're going to have to use your own ingenuity. 599 00:36:20,470 --> 00:36:26,530 And so for that, I'd recommend going to Bootstrap tutorial pages. 600 00:36:26,530 --> 00:36:27,800 TutorialsPoint has a good one. 601 00:36:27,800 --> 00:36:29,930 W3Schools has one. 602 00:36:29,930 --> 00:36:33,110 There's a couple-- there might be one on Codecademy. 603 00:36:33,110 --> 00:36:34,760 There's a bunch if you want. 604 00:36:34,760 --> 00:36:39,440 And they'll have at least some framework for how to deal with buttons, 605 00:36:39,440 --> 00:36:42,380 or how to deal with photos. 606 00:36:42,380 --> 00:36:46,580 And basing off of that level of information, 607 00:36:46,580 --> 00:36:49,670 you will then have to take whatever Bootstrap 608 00:36:49,670 --> 00:36:52,970 can give you and then maybe work on your own CSS or JavaScript 609 00:36:52,970 --> 00:36:54,780 and sort of go from there. 610 00:36:54,780 --> 00:36:59,810 So you're going to have to mess with it more yourself instead 611 00:36:59,810 --> 00:37:04,390 of being as strictly guided along, which is sort of fun. 612 00:37:04,390 --> 00:37:06,260 It can definitely get frustrating at time 613 00:37:06,260 --> 00:37:09,680 if you're dealing with, like, padding problems. 614 00:37:09,680 --> 00:37:13,430 But it is worthwhile, especially when you 615 00:37:13,430 --> 00:37:16,660 can show off this really cool functionality that you've worked on. 616 00:37:16,660 --> 00:37:21,650 And then, maybe you can help other new developers who have similar questions. 617 00:37:21,650 --> 00:37:24,530 Because definitely, bootstrap is an example of you 618 00:37:24,530 --> 00:37:29,930 can see what you think is possible just online and in forums. 619 00:37:29,930 --> 00:37:33,530 But then, you can come up with the previously impossible 620 00:37:33,530 --> 00:37:37,449 or just the previously un-implemented, and then sort of change 621 00:37:37,449 --> 00:37:40,490 the nature of how people might use it if it's a really cool functionality 622 00:37:40,490 --> 00:37:41,820 that you've created. 623 00:37:41,820 --> 00:37:45,350 So it's a great community, and this is a great chance 624 00:37:45,350 --> 00:37:48,830 to sort of push the limits of what you can understanding 625 00:37:48,830 --> 00:37:52,850 and what you can just find help for. 626 00:37:52,850 --> 00:37:56,120 So the last thing we're going to touch on 627 00:37:56,120 --> 00:38:01,180 is design practice to help you support your Bootstrap knowledge. 628 00:38:01,180 --> 00:38:07,130 So you set up a navigation bar, you set up a website. 629 00:38:07,130 --> 00:38:11,430 But you don't know how to deal with colors, for example. 630 00:38:11,430 --> 00:38:16,930 So some design tips and resources in addition to the Bootstrap help 631 00:38:16,930 --> 00:38:18,745 is for color palettes. 632 00:38:18,745 --> 00:38:21,510 A really useful tool is Adobe Color CC. 633 00:38:21,510 --> 00:38:27,950 It used to be called Kuler, which I always inadvertently do, 634 00:38:27,950 --> 00:38:29,240 it'll still come up. 635 00:38:29,240 --> 00:38:32,570 And I have the link here if you want to look at it. 636 00:38:32,570 --> 00:38:37,700 But it is just a useful way of getting hex or RBG 637 00:38:37,700 --> 00:38:42,290 codes for a palette of colors that you might use on your website, 638 00:38:42,290 --> 00:38:44,870 and making sure that they look good together. 639 00:38:44,870 --> 00:38:46,930 It can also help you build colors using color 640 00:38:46,930 --> 00:38:50,640 theory of complementary or supplementary colors. 641 00:38:50,640 --> 00:38:57,220 And there's a huge additional library of pre-set up color palettes. 642 00:38:57,220 --> 00:39:00,220 So you can go look there if you see something you like 643 00:39:00,220 --> 00:39:05,120 and then just use the values that they've given you. 644 00:39:05,120 --> 00:39:08,050 There's also another useful page on colors I didn't include here 645 00:39:08,050 --> 00:39:09,720 called Flat UI. 646 00:39:09,720 --> 00:39:16,080 If you Google just Flat and then the letters U and I, it's only got, 647 00:39:16,080 --> 00:39:19,510 I think, 12 or 16 colors on it. 648 00:39:19,510 --> 00:39:24,340 But they're sort of specifically formatted to look really good online. 649 00:39:24,340 --> 00:39:25,880 And I think they're really pretty. 650 00:39:25,880 --> 00:39:30,410 So maybe that's a good way of if you want a base color to base your color 651 00:39:30,410 --> 00:39:34,820 palette off of, you could go there, get the value of it, plug it into Kuler, 652 00:39:34,820 --> 00:39:38,870 and then go on your merry way. 653 00:39:38,870 --> 00:39:44,720 In addition to colors, a good way to get pictures for your site 654 00:39:44,720 --> 00:39:49,930 if you want to incorporate those would be, in my opinion, Unsplash. 655 00:39:49,930 --> 00:39:53,261 It's website you just go to, unsplash.com. 656 00:39:53,261 --> 00:40:00,700 It has a very large library of photos from professional photographers 657 00:40:00,700 --> 00:40:05,786 who sort of are giving these photos up free for anyone to use. 658 00:40:05,786 --> 00:40:07,160 You don't have to attribute them. 659 00:40:07,160 --> 00:40:09,110 You don't have to attribute Unsplash. 660 00:40:09,110 --> 00:40:10,890 You don't have to do anything. 661 00:40:10,890 --> 00:40:14,090 You can just use it, modify, do whatever you want. 662 00:40:14,090 --> 00:40:18,550 So that's convenient so you don't have to deal with attribution or rights 663 00:40:18,550 --> 00:40:23,711 on images, plus they're also just very pretty pictures generally. 664 00:40:23,711 --> 00:40:26,210 So that's a good way to get started if you want inspiration. 665 00:40:26,210 --> 00:40:29,180 666 00:40:29,180 --> 00:40:32,890 And then continuing on the theme of inspiration, sorry, 667 00:40:32,890 --> 00:40:37,490 I didn't mean to do that, there's the Bootstrap Expo, which 668 00:40:37,490 --> 00:40:39,970 is on the main Bootstrap download page. 669 00:40:39,970 --> 00:40:43,910 And it gives you a lot of examples of websites that use Bootstrap 670 00:40:43,910 --> 00:40:47,330 and how they've implemented it and how they've made it work for them. 671 00:40:47,330 --> 00:40:52,490 So this is a good way to see how to take the framework that bootstrap gives you 672 00:40:52,490 --> 00:40:59,180 and expand it into something specific and useful for what you're doing. 673 00:40:59,180 --> 00:41:02,960 There are also, as I said earlier, theme and template downloads 674 00:41:02,960 --> 00:41:06,490 that you can use to get started. 675 00:41:06,490 --> 00:41:08,950 These don't incorporate a lot of innovative design, 676 00:41:08,950 --> 00:41:14,800 but they incorporate at least some to get you sort of off the ground. 677 00:41:14,800 --> 00:41:20,330 And those you can get at start.bootstrap.com. 678 00:41:20,330 --> 00:41:23,390 And then, to leave you with a lasting quote that I really like, 679 00:41:23,390 --> 00:41:26,240 good design is as little design as possible. 680 00:41:26,240 --> 00:41:30,620 So basically, you shouldn't try to get in your own way. 681 00:41:30,620 --> 00:41:37,430 If you clutter things, if you try to show off your cool design skills 682 00:41:37,430 --> 00:41:44,300 and how many things you can do, the intentions of what you're working on 683 00:41:44,300 --> 00:41:45,090 won't be as pure. 684 00:41:45,090 --> 00:41:49,340 And it won't be as obvious for the user how to interact with the site. 685 00:41:49,340 --> 00:41:52,430 So you're going to want to focus on the essentials 686 00:41:52,430 --> 00:41:59,440 so that you can do less while making whatever you do implement do more work. 687 00:41:59,440 --> 00:42:03,860 So less is more, to use the cliche in this case. 688 00:42:03,860 --> 00:42:06,160 And it will help you stay true to your idea 689 00:42:06,160 --> 00:42:13,430 and make sure that it comes to life in a pure way, I guess, 690 00:42:13,430 --> 00:42:17,810 which minimalism is super in right now, which is convenient for us. 691 00:42:17,810 --> 00:42:20,510 Because that makes your life easier. 692 00:42:20,510 --> 00:42:25,280 So as long as you can make informed or at least what you think are informed 693 00:42:25,280 --> 00:42:29,660 design choices, as long as you're really thinking about them, then 694 00:42:29,660 --> 00:42:32,330 you're going to be fine. 695 00:42:32,330 --> 00:42:37,760 And that is it on this lesson on Bootstrap. 696 00:42:37,760 --> 00:42:40,800 I hope it was helpful. 697 00:42:40,800 --> 00:42:46,610 And I hope you can figure out how to use Bootstrap for your own projects. 698 00:42:46,610 --> 00:42:49,750 So yeah, thanks for listening. 699 00:42:49,750 --> 00:42:50,378