前端知识概述 5-Bootstrap

最新推荐文章于 2025-07-05 13:01:12 发布

原创最新推荐文章于 2025-07-05 13:01:12 发布 · 230 阅读

CC 4.0 BY-SA版权

文章标签：

5 篇文章

订阅专栏

Bootstrap是一款流行的HTML、CSS和JS框架，简化网页开发。它提供丰富的插件，支持响应式设计，适应不同设备。本文介绍其使用方法，包括中文学习资源、文件引入、布局容器和栅格系统原理。

bootstrap

概述

是html/css/js的一个集成框架使页面的开发更加的简单，方便，快捷

作用

1 提供了大量的插件，用起来更加的简单方便

2 可以制作响应式页面的开发

			响应式：制作一套项目页面可以兼容不同的设配（pc端 pad端 手机端）

bootstrap的使用

快速入门

1.bootstrap的中文学习网站: http://www.bootcss.com/
2.下载bootstrap-3.3.5-dist ---开发环境包  把解压后的3个文件导入要开发的项目中
3.参考文档基本模板引入文件 （3个meta  1个css文件2个js文件） 
4.布局容器

bootstarp的响应式页面技术实现原理（栅格系统）

栅格系统：随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

媒体查询:为我们的视图提供样式设定

当屏幕大于1200px的时候,我们可以选择使用提供好的样式来分列 col-lg-xx

当屏幕大于992并且小于1200px的时候,我们可以选择使用提供好的样式来分列 col-md-xx

当屏幕大于768并且小于992的时候,我们可以选择使用提供好的样式来分列 col-sm-xx

当屏幕小于768px的时候,我们可以选择使用提供好的样式来分列 col-xs-xx

boostarp的组成

组成部分：全局css样式组件 javascript的插件

全局css样式：提供了表格按钮图片表单等

组件：提供了下拉菜单分页导航条等

javascript的组件：提供了模态框轮播图等

nginx服务器部署bootstarp项目

需求：想将自己制作的首页让所有人都能访问到

条件: 使用服务器（nginx）

特点：存放到这个服务器上的项目可以让所有人通过浏览器去访问到

ps:只能放静态资源（html js css.图片）不能存放动态资源（servlet/jsp）—tomcat服务器

注意：不能放在中文文件名下

方式一：直接将项目放入html文件夹中通过浏览器访问项目名即可

方式二：通过配置文件的方式

location / {

        root   E:\bootstarp; （项目在磁盘的存放位置）

        index  index.html index.htm; （项目中默认打开的页面）

    }

root：指定项目地址

index：指定要访问的页面

nginx命令：

启动服务器：start nginx

重新启动服务器:nginx -s reload

停止服务器：nginx -s stop