Bootstrap入门（一）
前言
大家好！我是九歌，今天我要分享的内容是Bootstrap的入门，首先老规矩先上思维导图。
提示：以下是本篇文章正文内容，下面案例可供参考
一、Bootstrap
学习一门新的技术我们终究都逃不过三个W。What,Why,Where。
1.What——Bootstrap是什么？
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
Bootstrap包含
- 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
- CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
- 组件:Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
- JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
- 定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
2.Why——为什么要学习Bootstrap
1.节省时间
Bootstrap库中包含很多现成的代码片段，这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。
通过Bootstrap，开发者可轻易地操作窗口警告框、工具提示框、滚动条、按钮等。Bootstrap最突出之处是，它可以让你不必再费神费力地写脚本。
2.定制化
Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分，抛弃不需要的。Bootstrap整体允许你根据自己的需要，裁剪自己开发的项目。
3.详尽的说明文档，更容易上手
Bootstrap的文档相当精彩。Bootstrap的说明文档大大帮助了我们的入门学习。通过文档可以找到我们需要的所有信息。
4.响应式设计
响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及 使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们 的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。这样我们不用再忙于适配各类终端。
5.浏览器支持
各类浏览器都支持Bootstrap没有不兼容的问题。
6.移动设备优先
最难适配的就是移动设备啦，当移动设备都被解决了，其他的不也能迎刃而解了吗？
3.where——Bootstrap都用在哪些方面呢？
Bootstrap大多用于博客，企业的门户类网页等。毕竟人家推特是做博客的嘛。
不适用于复杂分类的网页：譬如某宝等。
二、使用步骤
1.下载Bootstrap
网址：https://v4.bootcss.com/
下载应该都会吧，下新版的就行，不会可以看文档，简单易上手。
2.引入库
代码如下：
<html><head><meta charset="utf-8" /><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style>.aa{color: white;background-color: #007BFF;border: 0px;width: 50px;height: 30px;border-radius: 3px;}</style><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/></head><body><div class="container"><button class="aa">查询</button><hr color="red" /><button class="btn btn-outline-primary">搜索</button></div><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script></body>
</html>
三、 案例
1.查询原生态实现对比Bootstrap方式实现
原生态代码如下：
<html><head><meta charset="utf-8" /><title></title><!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> --><style>.aa{color: white;background-color: #007BFF;border: 0px;width: 50px;height: 30px;border-radius: 3px;}</style><!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> --></head><body><div class="container"><button class="aa">查询</button><hr color="red" /><button class="btn btn-outline-primary">搜索</button></div><!-- <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>--></body>
</html>原生态效果如下：
Bootstrap方式代码如下：
<html><head><meta charset="utf-8" /><title></title><!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> --><style>.aa{color: white;background-color: #007BFF;border: 0px;width: 50px;height: 30px;border-radius: 3px;}</style><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head><body><div class="container"><button class="aa">查询</button><hr color="red" /><button class="btn btn-outline-primary">搜索</button></div><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script></body>
</html>
Bootstrap实现方式效果如下：
如果这里的大的div的class不是container的话，效果如下：
2. Bootstrap页面在手机浏览器中的展示效果
我们想要在移动端适配的话要在head加入meta_viewport。让我们来看效果。先上代码
<html><head><meta charset="utf-8" /><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style>.aa{color: white;background-color: #007BFF;border: 0px;width: 50px;height: 30px;border-radius: 3px;}</style><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head><body><div class="container"><button class="aa">查询</button><hr color="red" /><button class="btn btn-outline-primary">搜索</button></div><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script></body>
</html>效果如下：
箭头指的按钮就是将电脑的浏览器转换成手机端。
3. 首页导航&搜索区域原生态实现
代码如下：
<html><head><meta charset="utf-8"><title>案例3</title><style type="text/css">.aa{height: 50px;background-color: #F8F9FA;line-height: 50px;}.bb{float: left;margin-left: 50px;}.cc{float: right;margin-right: 50px;}.cc a{margin-left: 10px;}.ss{background-color: #dcdcdc;height: 100px;margin: 20px 50px 0px 50px;text-align: center;line-height: 100px;}.ss button{color: white;background-color: #007BFF;border: 0px;width: 50px;height: 30px;border-radius: 3px;}.ss input{border: 0px;width: 200px;height: 25px;}</style></head><body><div class="aa"><div class="bb">您好，欢迎来到霍格沃兹网上书店！</div><div class="cc"><a>首页</a><a>登录</a><a>注册</a><a>我的购物车</a></div></div><div class="ss"><input type="text"/><button>查询</button></div></body>
</html>效果如下：
4. 首页导航&搜索区域Bootstrap实现搭建书城首页框架
代码如下：
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><style>.navbar-collapse{flex-grow: 0;/* 1、代表制动会占用父容器剩余空间 0代表不占用 */}.ss{height: 100px;background-color: #dcdcdc;margin-top: 20px;}.form-group{width: 300px;margin-left: auto;margin-right: auto;margin-top: 31px;}</style></head><body><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">您好，欢迎来到霍格沃兹网上书店！</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNavAltMarkup"><div class="navbar-nav"><a class="nav-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a><a class="nav-item nav-link" href="#">登陆</a><a class="nav-item nav-link" href="#">注册</a><a class="nav-item nav-link " href="#">我的购物车</a></div></div></div></nav><!-- 栅格系统来实现首页的部分框架 --><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><form><div class="form-group"><div class="input-group mb-3"><input type="text" class="form-control" placeholder="书籍关键字" aria-label="Recipient's username"aria-describedby="basic-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button">查询</button></div></div></div></form></div></div><div class="row"><!-- 第二行 --><div class="col-3" style="background-color: pink;">左3-书籍分类</div><div class="col-9" style="background-color: skyblue; "><!-- 右9-轮播图&新书上架&热门书籍 --><div class="row"><div class="col">右9-第一行轮播图</div></div><div class="row"><!-- 右9中新书上架 --><div class="col">①新书上架</div><div class="col">②新书上架</div><div class="col">③新书上架</div><div class="col">④新书上架</div><div class="col">⑤新书上架</div></div><div class="row"><!-- 右9中热门书籍 --><div class="col">①热门书籍</div><div class="col">②热门书籍</div><div class="col">③热门书籍</div><div class="col">④热门书籍</div><div class="col">⑤热门书籍</div></div></div></div></div><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script></body>
</html>
效果如下：
总结
以上就是今天要讲的内容，本文仅仅简单介绍了bootstrap的使用,如有错误还望指正。谢谢您嘞。
Bootstrap入门（一）相关推荐
- Bootstrap入门（十三）组件7：导航条
Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...
- Bootstrap入门（三十）JS插件7：警告框
Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
- Bootstrap入门（二十一）组件15：警告框
Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...
- Bootstrap入门（二十九）JS插件6：弹出框
Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
- Bootstrap入门（八）组件2：下拉菜单
Bootstrap入门(八)组件2:下拉菜单 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link hr ...
- bootstrap入门步骤
bootstrap入门 bootstrap其实是一个项目 或者叫做框架 是能制作自适应平台 一个页面可以自动根据显示设备的分辨率 调整显示方式 1.超大分辨率显示器1920 2.普通1024–1920 ...
- Bootstrap入门与简述
Bootstrap入门 一.概述 1.Bootstrap简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScr ...
- 前端学习之Bootstrap入门 网格系统
vscode前端常用插件推荐 https://www.cnblogs.com/karthuslorin/p/8577224.html VS code Debug for Chrome项目文件 http ...
- Bootstrap入门需掌握的知识点（一）
转载请务必注明出处: Bootstrap入门需掌握的知识点(一) Bootstrap Bootstrap中文网:http://www.bootcss.com/ 1.什么是 Bootstrap ? 官方 ...
- Bootstrap入门——情景文本颜色及背景颜色
Bootstrap入门打卡1天:学习网址https://v3.bootcss.com/ [全局CSS样式]-[辅助类]关于情景文本颜色和背景颜色的设置 其中,情景文本颜色可以分为六种 -- 1.文本颜 ...
最新文章
- 10 个最值得 Python 新人练手的有趣项目
- Bzoj1002 [FJOI2007]轮状病毒
- 网络安装Centos x64 6.10
- python封装 继承 多态 举例_python面向对象中的封装、继承、多态
- 循环机换变速箱油教程_变速箱油用循环机换还是重力换更好？一次讲清楚，新手司机学学...
- Eigen部分基本使用方法
- MySQL查询语句(select)详解
- 企业发展步入“新两化” 用友优普助力中型企业商业创新
- c#Code Contracts代码协定
- Javascript作用域、闭包原理以及性能问题
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_14-异常处理-异常处理的问题分析...
- 30分钟学会iOS 11开发环境xcode 9图文教程
- 信息技术专项习题汇总
- matlab的三维绘图函数,MATLAB中的三维绘图函数总结
- 《编程之道》(转载) 全文
- Windows10超级好用的虚拟机
- 用node-webkit接入steamAPI
- 工具：通过Python fitz 提取PDF内的图片
- 数据结构——单链表 | 完善单链表
- Linux修改网卡设置