BootStrap

最新推荐文章于 2022-12-05 11:40:29 发布

满山的猴子我毛最多

最新推荐文章于 2022-12-05 11:40:29 发布

阅读量69

点赞数

本文链接：https://blog.csdn.net/qq_43467548/article/details/102857703

版权

#BootStrap
##基本概念：
1.一个前端开发的框架
* 框架：一个半成品软件，开发人员可以在框架基础上，再次进行开发
* 好处：
1.定义了很多的css样式和js插件，我们开发人员直接可以使用这些样式
和插件丰富的页面效果
2.效应式布局
同一套页面可以兼容不同分辨率设备
2.入门
1.下载bootstrap
2.在项目中将这三个文件复制
3.创建html页面，引入必要的资源文件

儿子

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<!--<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>-->
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

##响应式布局
* 同一套页面可以兼容不同分辨率的设备
* 实现：依赖于栅格系统：将一行分为平均分成12个格子，可以指定元素占几个格子
* 步骤:
1.定义容器，相当于之前的table
*容器分类：
1.container 两边留白
2.container.fluid：100%宽度
2.定义行，相当于之前的tr
3.定义元素指定该元素在不同设备上所占格子的数目.样式：col.设备代号.格子数目
*设备代号
四种：
xs：超小屏幕手机 (<768px)
sm:小屏幕平板 (≥768px)
md:中等屏幕桌面显示器 (≥992px)
lg:(≥992px) 大屏幕大桌面显示器 (≥1200px)
*注意
1.一行中如果格子数目超出12，则超出部分自动换行
2.栅格类属性可以向上兼容，栅格类适用于与屏幕宽度大于或等于分界点大小的设备
3.如果真实设备宽度小于设置栅格类属性的设备代码的最小值，会一个元素沾满一整行

##CSS样式和js插件
全局CSS样式
* 按钮：class=“btn btn-default”
* 图片
* class=“img-responsive”:图片在任意尺寸都占100%
* 图片形状方的
* 圆的
* 相框
*
* 表格
* 表单
组件
* 导航条
* 分页条
插件
*轮播图

满山的猴子我毛最多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap

#BootStrap##基本概念：1.一个前端开发的框架* 框架：一个半成品软件，开发人员可以在框架基础上，再次进行开发* 好处：1.定义了很多的css样式和js插件，我们开发人员直接可以使用这些样式和插件丰富的页面效果2.效应式布局同一套页面可以兼容不同分辨率设备2.入门1.下载bootstrap2.在项目中将这三个文件复制3.创建html页面，引入必要的资源文件...
复制链接

扫一扫