一个HTML的结构 html 1574736080498 就是这个样子的 导入Bootstrap 具体参考官网：https://v3.bootcss.com/ （目前中文官网貌似比国外的版本低，所以不太一样，最好别混着用） 我们还是以上面的那个文件为例 在head里面引入一堆代码 像这样，直接从官网上剽 1574736912696 先别管，把这几行放到你的head里去 1574737005266 在body里的操作 创建一个div标签并且让其class="container" 然后所有的后续标签全部写在这个div里面 像这样： 1574736613954 至此，你就可以开心地使用bootstrap了 使用bootstrap 打开刚才的网页，好像没有什么太大的变化？ 1574737060298 但是你仔细看，这些字已经不是在最左边了，而是稍微被往中间放了，这其实就是Bootstrap开始自动帮你调整页面了（而且这种页面的调整是响应式的） 无脑剽代码 去官网上找到：组件 这里 1574737174291 选一个你喜欢的东西 比如我选的巨幕 1574737219421 1574737263551 然后我把下面的代码复制了 1574737298529 直接粘贴到我的html文件里去 1574737351533 然后就可以用了： 1574737395940 自己写点字上去 如果你觉得这个不够爽，那还有： 手写一个好看的导航栏是不是很累？ Bootstrap一键解决： 1574738673728 去官网的组件部分找到 导航栏 然后选一个你心仪的： 1574738726661 然后剽代码： 1574738776753 虽然看起来很复杂但是都是一键剽的..... 然后保存，打开： 1574738851144 done! 具体功能还需要自己实现 然后有些样式出问题了的话自己再调节一下就好了 无脑改样式 我们都知道，原版的按钮很丑 1574737507043 这么丑： 1574737567969 然而Bootstrap人家twitter的工程师已经给你设计了好看的样式了，你只需要加入短短一句代码：像这样： 1574737805828 然后： 1574737857668 就好多了 其他还有很多样式，具体可以去官网的全局样式那里看： 1574737899643 还是直接复制就可以了 1574737931791 因为浏览器不同可能按钮不完全一样（比如我上面的那个） 另外还有更高级的东西比如按钮组，在组件部分里： 1574738003797 抄就对了 栅格系统 这个应该算是Bootstrap里最难的部分了.....其实也很简单，只不过写不写得好看就是另外一回事了 在Bootstrap里 整个网页实际上为了控制元素位置大小是被化成了很多个格子的 比如他规定，一行就有12个格子 那么栅格系统就是用来控制你元素的位置的 比如他的官网 1574738362800 你可以看到，他的总体结构是这样样子的： 1574738438191 每个框框就是一个div标签，然后上面导航栏是一个长长的div，中间写着组件的那段是一个长度长一些的占了整整一排的div框框，然后下面你可以看到左边是说明，右边是目录，大概比例为2：1，其实就是下面总体部分就是个大的div，里面分为两个小的div框框，其中左边那个的宽度是8，右边的那个宽度是4。

本文章由javascript技术分享原创和收集