Bootstrap3第一天

2018/11/13

刚上完经济法学,回到宿舍突然灵光一闪,决定在博客园记录下自己学习bootstrap的过程以及笔记,有些东西只有写下来才觉得像是自己的东西。

我是通过菜鸟教程、bootstrap中文网、和网易云课堂学习bootstrap的,现在正在学习的是bootstrap3。

菜鸟教程http://www.runoob.com/bootstrap/bootstrap-tutorial.html

Bootstrap3第一天_第1张图片

bootstrap中文网http://www.bootcss.com/

网易云课堂学习https://study.163.com/

Bootstrap3第一天_第2张图片

什么是bootstrap?
官方回答:Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

我个人认为bootstrap就是个最简单的前端框架,什么都给你写好了,直接用就可以了,非常适合小白适合我,我也越来越喜欢bootstrap了。

现在来讲讲如何安装使用bootstrap3吧
有两种方法
第一种使用的是在线
标签后面导入三条链接,css\jquery\js<br> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><br> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --><br> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><br> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><br> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><br> 这也是在bootstrap中文网上可直接找到。<br><a href="http://img.e-com-net.com/image/info8/bd2a52e416e54a8a9d449372b9212a05.jpg" target="_blank"><img alt="Bootstrap3第一天_第3张图片" class="has" height="556" src="http://img.e-com-net.com/image/info8/bd2a52e416e54a8a9d449372b9212a05.jpg" width="650" style="border:1px solid black;"></a></p> <p>第二种就是下载源代码,在本地直接导入使用<br>     <title>index
    
    
   
导入时注意路径就可以了,我喜欢用压缩版的,当然感觉学习版比较好。

其中我还发现了bootstrap在线制作网页的可视化布局系统也是非常的强大,快的两分钟就能做出一个非常不赖的网页来。
bootstrap可视化布局系统http://www.ibootstrap.cn/
Bootstrap3第一天_第4张图片
先在布局设置里选择自己需要的布局设置,然后再拖拽基本的css、工具组件和JavaScript到布局容器里面。
Bootstrap3第一天_第5张图片
设置好后直接下载代码复制到自己的body里面就可以了,下面就是我随意拖拽做成的网页,看着还不错有点感觉。

Bootstrap3第一天_第6张图片

Bootstrap3第一天_第7张图片

好了今天就写到这了,洗澡了。

 

 

你可能感兴趣的:(Bootstrap3第一天)