BootStrap

最新推荐文章于 2024-08-31 06:39:46 发布

乀太空旅客

最新推荐文章于 2024-08-31 06:39:46 发布

阅读量419

点赞数 2

CC 4.0 BY-SA版权

文章标签： BootStrap

本文链接：https://blog.youkuaiyun.com/weixin_43917392/article/details/86129613

BootStrap

第一章 BootStrap概述和快速入门

1、BootStrap的概述

A.BootStrap是Twitter公司开发的"前端框架"

B.好处:
	a.包含有很多定义好的 CSS和JS代码,可以直接使用
	b.支持响应式布局.（一套代码在不同分辨率上面都有很好的体验效果）

2、BootStrap的网站

中文官方网站地址  http://d.bootcss.com/bootstrap-3.3.5.zip

3、模板代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

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


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>

</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、导航条样式设置

设置
	<nav class="navbar navbar-inverse">  <!-- 反色设置"黑色" -->

3、轮播图

设置
	data-interval="3000"  <!-- 设置时间差 每隔多长时间替换一次，在轮播图div上面设置 -->

4、准备工作

拷贝BootStrap的三个文件夹和jquery-3.2.1.min.js
	a. css
	b. fonts
	c. js （需要拷贝jquery-3.2.1.min.js）