js——bootstrap框架
2024-09-06 12:04:06
前端开发框架,移动优先,响应式布局开发。
js有一个特性是阻塞加载,也就是说js文件如果没有加载完,不会进行后面的加载,所以例子中会把js文件写在body的最后一句,但是实际开发不会这样。
容器:
1.container:固定宽度
尺寸:1170、970、750、100%(这个要记住)
2.container-fluid:流体布局
bootstrap 栅格系统:
bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类型,这些样式类组成了一套响应式、移动设备优先的流式栅格系统
1.col-lg-
2.col-md-
3.col-sm-
4.col-xs-
bootstrap响应式查询区间:
1.>=768
2.>=992
3.>=1200
deom1:(改变窗口大小逐渐变化)
<div class="container">
<div class="row">
<!--每个div占3等份,四个div就是12-->
<div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
<div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
<div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
<div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
</div>
</div>
demo2:(列偏移)
<div class="container">
<div class="row">
<div class="col-lg-3">01</div>
<div class="col-lg-3 col-lg-offset-2">02</div>
<div class="col-lg-3 col-lg-offset-1">03</div>
</div>
</div>
按钮
表单
最新文章
- BZOJ 3732 Network
- List<;T>; 转换 DataTable
- C#泛型委托,匿名方法,匿名类
- MySQL(六) —— 自定义函数
- Atom markdown .md 编写格式技巧
- strust1.x中formbean的原理及作用
- 【HDOJ】2888 Check Corners
- 优秀的弹窗插件 jquery.lightbox_me.js
- phpMyAdmin中mysql的创建数据库时的编码的问题
- 服务启动错误1053,一例解决方案(给用户添加NetworkService权限)
- JSP之项目路径问题(${pageContext.request.contextPath},<;%=request.getContextPath()%>;以及绝对路径获取)
- C. New Year and Rating
- 三十天学不会TCP,UDP/IP网络编程 - UDP的实践--DHCP
- 想要薪资20-30K,Python程序员认真敲代码就够了!
- window10 hello 人脸识别无法启动相机的问题
- 从一个点子到一个社区APP,是如何通过.NET实现的?——“文林物业系统”APP介绍及采访记录
- readonly与disabled的区别
- 创建一个dynamics 365 CRM online plugin (二) - fields检查
- ztree树形菜单demo
- 高级java必会系列一:常用线程池和调度类
热门文章
- VC++6.0注释快捷键的添加使用
- 装了Ironpython还需要装Python吗?
- 高级Java工程师必备 ----- 深入分析 Java IO (二)NIO
- Linux 下使用 ssh 登录局域网其他电脑的方法
- 洛谷【P3612】[USACO17JAN]Secret Cow Code秘密奶牛码
- VS2008中_T的作用
- Asp.net工作流workflow实战之书签(二)
- play 学习 一 : 构建SBT的play项目
- java报表开发之报表总述
- Nios程序烧写到EPCS方法 - 第1页 - asus119's Blog - EDN China电子设计技术