- 什么是bootstrap?
- bootstrap是当下最流行的前端框架（界面工具集);
- 特点是灵活简洁、代码优雅、美观大方；
使用
-
1.搜索bootstrap进入官网，进入bs3.
-
2.下载bootstrap
- 3.设置基本模版,导入bootstrap
<!DOCTYPE html>
<html lang="zh-CN">
<head>
1.<!--字符集:GBK GB2312 utf8让浏览器支持中文显示-->
<meta charset="utf-8">
<!--Compatible兼容-->
2.<!--代表告诉浏览器使用最新的解析器(渲染引擎)来解析html代码-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
3.<!--视口模式-->
width=device-width 显示的内容宽度和当前的设备的宽度保持一致，不要缩放（移动端）
<meta name="viewport" content="width=device-width, initial-scale=1">
注意：<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！-->
<title>BootStrap初体验</title>
4.<!--导入bs的css样式-->
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
5.<!--ie9以下不支持
html5标签 (header section.nav) ===>html5shiv.min.js解决不支持html5标签
CSS3的属性(animaiton transform @media) =>respond.min.js解决属性不支持
-->
<script src="lib/html5shiv/html5shiv.js"></script>
<script src="lib/respond/respond.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
6.<!--bootStrap本身需要依赖我们的jq-->
<script src="lib/jquery/jquery.js"></script>
7.<!--需要导入自身的js文件-->
<script src="lib/bootstrap/js/bootstrap.js"></script>
</body>
</html>
- 常用组件
- 全局 CSS 样式
- 栅格系统（重点）
- 排版
- 代码
- 表格
- 表单
- 按钮
- 图片
- JavaScript 插件
过渡效果
模态框
下拉菜单
滚动监听
标签页
工具提示
弹出框
警告框
按钮
Collapse折叠面板
Carousel轮播图
Affix吸顶效果 - 总结：给想要改变样式的标签添加bootstrap的类，改变成封装好的css样式。
- 栅格系统：使用一种响应式网格布局（其实就是表格）--可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求
（1）使用div将class属性 设为col-md-，在这里，md 表示 medium (中等的)， 代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
（2）使用div将class属性 设为col-xs-，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕）， 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。例如：<div class="col-xs-4">
网友评论