微信网站的结构,网站copyright写法,博客平台wordpress,代加工订单网文章目录1 概念2 快速入门3 响应式布局4 CSS样式和JS插件1 概念 BootStrap是前端开发框架#xff0c;基于HTML、CSS、JavaScript。 优点#xff1a; 定义了很多CSS样式和JS插件#xff0c;可以直接使用。响应式布局#xff1a;同一套页面可以兼容不同分辨率的设备。 2 快… 文章目录1 概念2 快速入门3 响应式布局4 CSS样式和JS插件1 概念 BootStrap是前端开发框架基于HTML、CSS、JavaScript。 优点 定义了很多CSS样式和JS插件可以直接使用。响应式布局同一套页面可以兼容不同分辨率的设备。 2 快速入门 下载Bootstrap将Bootstrap导入项目复制粘贴模板导入样式和插件 !DOCTYPE html html langzh-CN headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1!-- 上述3个meta标签*必须*放在最前面任何其他内容都*必须*跟随其后 --titleBootstrap 101 Template/title!-- Bootstrap --script src/js/bootstrap.js/bootstrap.min.js/scriptlink hrefcss/bootstrap.min.css relstylesheetlink hrefcss/index.css relstylesheetscript srcjs/jquery-3.2.1.min.js/scriptscript srcjs/bootstrap.min.js/script /head body h1你好世界/h1 /body /html3 响应式布局 实现 依赖于栅格系统将一行平均分成12个格子可以指定元素占多少格子。 步骤 定义容器container、container-fluid定义行row定义元素指定该元素在不同的设备上所占的各自数目。样式col-设备代号-格子数目。设备代号【xs超小屏幕手机、sm小屏幕平板、md中等显示器、lg大屏幕大显示器】 大屏显示效果 1×12 小屏显示效果 2×6 style.inner{border: 1px solid red;}/style /head bodydiv classcontainer-fluiddiv classrow/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/divdiv classcol-lg-1 col-sm-2 inner栅格/div/div /body /html注意 container-fluid每一种设备都是100%宽度container固定宽度每种设备不一样有留白超过12个格子就自动换行栅格类可以向上兼容如果真实设备宽度小于设备栅格类属性的设备代码的最小值则一个元素沾满一行。 4 CSS样式和JS插件 具体使用https://v3.bootcss.com/ 全局样式 按钮表格表单图片 组件 导航条分页条 插件 轮播图