大家好，又见面了，我是你们的朋友全栈君。
BootStrap常用组件
PS:所有的代码必须写在<class=”container/container-fluid”>容器当中
常用组件包含内容:
- 字体图标
- 下拉菜单
- 按钮组
- 输入框俎
- 导航
- 分页
- 标签和徽章
- 页头
- 缩率图
- 进度条
进度条示例：
代码语言：javascript复制var $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);
function setValue() {
if (width === 100) {
clearInterval(theID);
} else {
width ;
$d1.css("width", width "%").text(width "%");
}
}响应式开发
为什么要进行响应式开发？
随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。
什么是响应式？
利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。
用到的技术：
CSS3@media查询
用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。
常见属性：
- device-width, device-height 屏幕宽、高
- width,height 渲染窗口宽、高
- orientation 设备方向
- resolution 设备分辨率
语法：
代码语言：javascript复制@media mediatype and|not|only (media feature) {
CSS-Code;
}不同的媒体使用不同的stylesheet
代码语言：javascript复制<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">viewport
手机浏览器是把页面放在一个虚拟的”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
代码语言：javascript复制<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>- width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
- height：和 width 相对应，指定高度。
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放。
Bootstrap的栅格系统
- container
- row
- column
注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。
JavaScript插件
常用的Bootstrap自带插件
其他常用插件
Bootstrap实例精选：
- 封面图
- Carousel
- 博客页面
- 控制台
- 登录页
- Offcanvas
课后习题：
- 后台管理页面（修改Dashbord）
- 常用组件练习
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/124506.html原文链接：https://javaforall.cn
