BootStrap是什么?

BootStrap是HTML,CSS,JS框架.主要用于开发响应式布局,移动设备优先的WEB项目.

为什么要使用BootStrap?

1.简洁,直观,强悍的前端开发框架,是HTML,CSS,JavaScript工具集

2.基于H5,C3具有友好的学习曲线,卓越的兼容性,响应式设计,12列网格,样式向导文档

3.自定义JQuery插件,完整的类库.BootStrap3基于Less,BootStrap4基于Sass的CSS预处理技术

4.BootStrap响应式布局设计,让一个网站可以兼容不同分辨率的设备.

5.具有丰富的组件

下载和使用

1.BootStrap下载 https://v3.bootcss.com/

2.下载完成后

拷贝dist/css中的bootstrap.min.css到项目css中

拷贝dist/js中的bootstrap.min.js到项目的js中

3.下载jquery.js jQuery

4.BootStrap的页面模板

<!DOCTYPE html>
<html lang="en"><head><!--设置当前HTML文件的字符编码--><!--compatible兼容的，设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）--><!--声明当前网页在移动端浏览器展示的相关设置--><!-- viewport表示用户是否可以缩放页面width指定视区的逻辑宽度device-width指定视区宽度应为设备的屏幕宽度initial-scale指令用于设置Web页面的初始化缩放比例initial-scale-1则将显示未经缩放的Web文档--><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap基本的HTML模板</title><!--引入Bootstrap核心样式表(CSS)文件--><link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/><!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签--><!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询--><!--[if It IE 9]><script src="html5shiv/html5shiv.min.js"></script><script src="Respond/respond.min.js"></script><![endif]--><!--自己写的CSS样式文件放head最下面--></head><body><div><h1>Hello,world!</h1></div><!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边--><script src="js/jquery.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。--><script src="bootstrap/js/bootstrap.min.js"></script><!--自己写的js文件放在body最下面--></body>
</html>

布局容器

container:类用于固定宽度并支持响应式布局的容器

示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 编码 --><title>OA办公自动化系统</title><!-- 标题 --><!-- <link href="images/favicon1.ico" rel="icon" type="image/x-icon" /><!-- 登录界面图标 --> --><link href="../../static/bootStrap/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" /></head><body><div class="container" style="background-color: thistle;height: 500px;">container:类用于固定宽度并支持响应式布局的容器</div></body>
</html>

效果

container-fluid类用于100%宽度,占据全部视口(viewport)的容器

示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 编码 --><title>OA办公自动化系统</title><!-- 标题 --><!-- <link href="images/favicon1.ico" rel="icon" type="image/x-icon" /><!-- 登录界面图标 --> --><link href="../../static/bootStrap/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" /></head><body><div class="container-fluid" style="background-color: thistle;height: 500px;">.container-fluid类用于100%宽度,占据全部视口(viewport)的容器</div></body>
</html>

效果

栅格网格系统是什么?

BootStrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或32份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出来强大的响应式网格系统。BootStrapu框架中的网格系统就是将容器平分成12份。

注意:网格系统必须使用到CSS

container、row、xs（xsmall phones 超小屏（自动）），sm（small tablets 小屏（750px）），md（middle desktops 中屏（970px）），lg（laege desktops 和大屏（1170px））

数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）。

在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。

示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 编码 --><title>OA办公自动化系统</title><!-- 标题 --><!-- <link href="images/favicon1.ico" rel="icon" type="image/x-icon" /><!-- 登录界面图标 --><link href="../../static/bootStrap/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /></head><body><!-- 常规布局 --><div style="background-color: deepskyblue;">常规布局 4</div><div style="background-color: bisque;">常规布局 8</div><hr /><!-- 布局容器 --><div class="container"><div class="row"><!-- 行元素 --><div class="col-md-4" style="background-color: deepskyblue;">4列</div><!-- 列元素  col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值 --><div class="col-md-8" style="background-color: bisque;">8列</div></div></div></body>
</html>

效果

BootStrap详细应用-小bai前端框架进阶秘籍相关推荐

像Bootstrap一样比较热门的前端框架有哪些
像Bootstrap一样比较热门的前端框架有哪些一.总结一句话总结:框架大同小异,可以多去各自官网看看效果(比较一下各自的不同点(也就是提供的不同的功能)),然后根据需求选择用哪个.我觉得boot ...
mpvue开发小程序前端框架
mpvue是一个使用 Vue.js 开发小程序的前端框架. 一.主要特性: 彻底的组件化开发能力:提高代码复用性完整的 Vue.js 开发体验方便的 Vuex 数据管理方案:方便构建复杂应用快捷 ...
MUI开发大全(小程序前端框架)
转载 https://www.cnblogs.com/jiekzou/p/7499549.html MUI开发大全最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己c ...
搭建vue前端框架或微信小程序vue框架步骤
搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node.npm版本,确保环境正确 node --v ...
表单－微信小程序前端制作切片演示
小程序前端制作-表单切片,内含服务器端.小程序所有文件.切片文件(可以用小程序切片软件打开再次编辑).效果图内含以下栏目: 新增校园经历组织/公司名称职位开始时间结束时间经历描述资源下载 ...
理解前端框架、前端库，两者有什么区别
一.前端框架(Framework).前端库(Library)两者的概念和区别是什么前端框架和库都是前端开发中常见的概念,它们的区别在于它们所解决的问题不同. 1.1.前端框架(Framework)是 ...
前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...

BootStrap详细应用-小bai前端框架进阶秘籍

BootStrap是什么?

为什么要使用BootStrap?

下载和使用

布局容器

container:类用于固定宽度并支持响应式布局的容器

示例

效果

container-fluid类用于100%宽度,占据全部视口(viewport)的容器

示例

效果

栅格网格系统是什么?

示例

效果

BootStrap详细应用-小bai前端框架进阶秘籍相关推荐

最新文章

热门文章

BootStrap详细应用-小bai前端框架进阶秘籍

BootStrap是什么?

为什么要使用BootStrap?

下载和使用

布局容器

container:类用于固定宽度并支持响应式布局的容器

示例

效果

container-fluid类用于100%宽度,占据全部视口(viewport)的容器

示例

效果

栅格网格系统 是什么?

示例

效果

BootStrap详细应用-小bai前端框架进阶秘籍相关推荐

最新文章

热门文章

栅格网格系统是什么?