快速上手Bootstrap
一个HTML的结构
html<!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery-3.4.1.js"></script> <!--导入js文件--><meta charset="utf-8"> <!--网页编码选择utf-8字符集--><title>这是标题</title><style> /*这里是写css的*/ .a{ /*这表示对class为a的元素进行css解决 这里的意思是设置外边距为20px */ margin:20px; } </style><script> //这里是你可以直接写js代码的地方 </script> </head><body> <!--每个< >这样的东西叫做一个标签，比方div就是一个框的标签，代表一个框的元素，h1代表的是大标题 --> <div class="a" id="myId"> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </div> </body></html>
1574736080498
就是这个样子的
导入Bootstrap
具体参考官网：https://v3.bootcss.com/
（目前中文官网貌似比国外的版本低，所以不太一样，最好别混着用）
我们还是以上面的那个文件为例
在head里面引入一堆代码
像这样，直接从官网上剽
1574736912696
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>先别管，把这几行放到你的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。
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 快速上手Bootstrap
