讲解BootSreap

最新推荐文章于 2021-05-28 18:39:03 发布

Bao_Joy

最新推荐文章于 2021-05-28 18:39:03 发布

阅读量481

点赞数 1

本文链接：https://blog.csdn.net/Bao_Joy/article/details/82762395

版权

#课程大纲
1、BootStrap的概述和快速入门
2、BootStrap的常用样式组件插件

##第一章 BootStrap的概述和快速入门
1、BootStrap的概述
A.BootStrap是Twitter公司开发的前端框架
B.好处:
a.包含有很多定义好的 CSS和JS代码,可以直接使用
b.支持响应式布局.（一套代码在不同分辨率上面都有很好的体验效果）
2、BootStrap的入门
中文官方网站地址 http://d.bootcss.com/bootstrap-3.3.5.zip
A.复制文件
bootstrap-3.3.7-dist 文件夹下面的 css js fonts 文件夹复制项目.
jquery-3.2.1.min.js 文件复制到 js 目录下面
B.复制模板代码
Bootstrap离线文档\v3.bootcss.com\index.htm -> 起步 -> 基本模板
C.模板代码

基础模板

				<!-- Bootstrap css 引入的路径需要修改 -->
				<link href="../css/bootstrap.min.css" rel="stylesheet">

			</head>
			<body>
			<h1>你好，世界！</h1>

			<!-- jQuery 引入的路径需要修改-->
			<script src="../js/jquery-3.2.1.min.js"></script>
			<!-- bootstrap.min.js 引入的路径需要修改 -->
			<script src="../js/bootstrap.min.js"></script>
			</body>
		</html>

##第二章 BootStrap的常用样式组件插件
1、栅格系统(体现出"响应式布局")
A.将屏幕划分成为12个格子.
B.操作步骤
a.样式"理解成为table" .container (两端留白) 或者 .container-fluid (宽度全屏)
b.样式"理解成为tr" .row
c.样式"理解成为td" .col-尺寸-占格数目
C.尺寸的大小: (顺序"英文字母顺序lmsx")
a. lg 超大屏幕尺寸(超大)
b. md 中等屏幕尺寸(大)
c. sm 平板屏幕尺寸(中等)
d. xs 手机屏幕尺寸(小)
D.注意事项
a.设置的"占格数目"超过12会前面的独占一行,后面的自动换一行
b.设置的"尺寸"大于设备的尺寸,会独占一行
c.设置的"尺寸"小于设备的尺寸,会向上兼容,也具备上面的效果.
E.列偏移
a.语法
col-尺寸-offset-占格数目
b.含义
在原始的栅格当中,占据几个空白格子
2、按钮样式设置
A.位置
文档: 全局CSS样式 -> 按钮
B.设置
（默认样式）Default
（大按钮）Large button
3、图片样式设置
A.位置
文档: 全局CSS样式 -> 图片
B.设置

4、表格
A.位置
文档: 全局CSS样式 -> 表格
B.设置

5、表单
A.位置
文档: 全局CSS样式 -> 表单
B.设置
水平表单
6、导航条
A.位置
文档: 组件 -> 导航条
B.设置

Bao_Joy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
讲解BootSreap

#课程大纲1、BootStrap的概述和快速入门2、BootStrap的常用样式组件插件##第一章 BootStrap的概述和快速入门1、BootStrap的概述A.BootStrap是Twitter公司开发的前端框架B.好处:a.包含有很多定义好的 CSS和JS代码,可以直接使用b.支持响应式布局.（一套代码在不同分辨率上面都有很好的体验效果）2、BootStrap的入门中文...
复制链接

扫一扫