一:前端框架(bootstrap)
(1):快速的开发
(2):响应式布局
(3):html5+css3写成的
(4):页面搭建比较好看
二:下载安装(bootstrap) 3.0版本 地址:https://v3.bootcss.com/getting-started/
(1):安装bootstrap
(2):引入bootstrap2个css文件
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
(3)bootstrap如下:
bootstrap 文本
(h1-h6/.h1-.h6) class="h1-h6" 任何一个标签都拥有
<small>字体变小</small>
<mark>标记</mark>
<del>删除标记</del>
<ins>下划线</ins>
<u> 下划线 </u>
段落对齐方式:
.text-left
.text-center
.text-right
.text-lowercase 大写内容转换为小写
.text-uppercase 小写的内容转换为大写
.text-capitalize 所有内容首字母变为大写
列表:
ul: 去除小黑点
.list-unstyled
内联列表
.list-inline:放入一排
<ul class="list-inline">
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">招聘</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">练习</a></li>
</ul>
bootstrap中的排版-表格 table
.table-bordered 带边框表格
.table-striped 条纹状表格
.table-hover 悬停变色
.table-condensed 紧凑风格
颜色:
.danger 红色
.waring 警告
.info 蓝色
.success 标志成功
.active 鼠标悬停在行或者单元格上面
bootstrap中的排版-表单 form
h5属性:
placeholder="这是一个输入框"
.form-control :控制表单 (是所有form表单里面的属性都拥有这个.form-control属性)
.form-group :组件
.form-inline :把所有的表单控件放到水平排列 .has-success:改变整个组的状态 同时使用
.input-lg;使输入框变大(默认的属性)
.input-sm:使输入框变小
.sr-only:使提示信息消失
.control-label :改变边框的颜色 (默认的属性)
.has-success : 改变整个组的状态
<from class="form-inline">
<div class="form-group has-success">
<label for="" calss="sr-only">这是一个输入框:</label> 提示标签
<label for="" calss="has-success">这是一个输入框:</label> 提示标签
<input class="form-control input-lg"> .form-control
</div>
bootstrap 按钮(属性)
.btn 按钮class属性
按钮的风格:
1: .btn-primary :我是原始按钮 深蓝
2: .btn-info :我是info按钮 浅蓝
3: .btn-success:我是成功按钮 绿
4: .btn-danger:我是危险按钮 红
5: .btn-warning:我是警告按钮 黄
6: .btn-inverse:我是翻转按钮 白
7: .btn-link:我是link按钮 带a带下划线的按钮
8: .btn btn-info btn-block :我是link按钮 .btn-block:全屏 全屏按钮
9: <a href=”” class=”btn btn-danger”>我是a标签按钮</a>
.btn-lg变大 .btn-sm变小 .active 悬浮 .btn-block全屏
bootstrap 图片(属性)
1: .img-responsive 响应式图片
2: .img-rounded 圆角
3: .img-circle 圆形图片
4: .img-thumbnail 缩略图
在meta标签里面加入(响应式布局)写在meta标签里面头部位置
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 初始化浏览器的时候 让宽度等于浏览器的宽度 initial-scale 让页面加载的时候 缩放的比例100% -->
bootstrap 网格布局(栅格布局)
//盒子布局
//网格布局
.container :容器 (居中)
col-xs- <=768px 超小屏幕的手机
col-sm- >=768 小平板
col-md- 中等屏幕 >=992px
col-lg- >1200屏幕
<!-- 定义一行 row -->
<!-- 定义容器 -->
<!-- <div class="container"> container:居中
.hidden-xs 在小屏幕下隐藏掉
.visible-xs 当尺寸缩小到手机屏幕时候显示
.clearfix:清除浮动
.alert-info :强调
.col-md-offset-6:向右边偏移
.col-md-push-8:向右走 push:推
.col-md-pull-4:拉 向左移动 pull:拉
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</p>
<div class="row">
<div class="col-md-4 -col-md-offset-5 -col-md-push-5">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻哈哈嘻嘻嘻嘻嘻嘻</p>
</div>
<div class="col-md-4">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻哈哈嘻嘻嘻嘻嘻嘻嘻嘻</p>
</div>
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<h1>阿斯蒂芬</h1>
<p>sdfgdsf</p>
<div class="row">
<div class="col-md-4 -col-md-push-4 col-md-pull-8">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻哈哈嘻嘻嘻嘻嘻嘻嘻嘻</p>
</div>
<div class="col-md-4">
<h1>阿斯蒂芬</h1>
<p>嘻嘻哈哈嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</p>
</div>
</div>
</div>
</div>
</div>
bootstrap 按钮菜单 btn
//组件(js)
导入bootstrap核心js文件
导入jquery包(要10.0以上的版本)
1:.btn-group :组
.dropdown-toggle:下拉效果
2: .btn btn-default dropdown-toggle
3: data-toggle="dropdown" //js组件使用
4: <span class="caret"></span> .caret:s三角形
5: .dropdown-menu :下拉按钮
<ul class="dropdown-menu">
bootstrap 胶囊型(导航) nav
设置的状态不一样,选中的状态不同
1: .nav nav-pills 选中蓝
2: .active :选中转态 激活的
3: .disabled:不能选 禁用的
4: .nav nav-tabs 选中类似长城
二级导航
<ul class="nav nav-pills">
<li><a href="#">首页</a></li>
<li><a href="#">详情页</a></li>
<li><a href="#">咨询页</a></li>
<li><a href="#">联系我们</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">php</a>
</li>
<li>
<a href="#">java</a>
</li>
<li>
<a href="#">js</a>
</li>
</ul>
</li>
<li></li>
</ul>
面包屑导航 : .breadcrumb 导航列表间价格竖杠
<ul class="breadcrumb">
<li><a href="">首页</a></li>
<li><a href="">详情页</a></li>
<li><a href="">咨询页</a></li>
<li><a href="">联系我们</a></li>
</ul>
基础导航:
.navbar 基础导航
.navbar-default 默认导航样式 灰
.navbar-inverse 导航黑色
组合使用:
.navbar navbar-default navbar-inverse
<div class="navbar navbar-default navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="">网站介绍</a></li>
<li><a href="">系列教程</a></li>
<li><a href="">名师介绍</a></li>
<li><a href="">成功案例</a></li>
</ul>
</div>
加入导航的标题
.navbar-header
.navbar-brand
.navbar-inverse 翻转(黑色)
<div class="navbar navbar-default navbar-inverse">
<div class="navbar-header">
<a href="" class="navbar-brand">欢迎</a>
</div>
<ul class="nav navbar-nav">
<li><a href="">首页</a></li>
<li><a href="">详情页</a></li>
<li><a href="">咨询页</a></li>
<li><a href="">联系我们</a></li>
<ul>
</div>
组合表单使用
.navbar-fixed-bottom 底部
.navbar-form navbar-right :form 表单居右
.form-group:组
.form-control :文本内容
placeholder="请输入“
<div class="navbar navbar-default ">
<div class="navbar-header">
<a href="" class="navbar-brand">欢迎</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">详情页</a></li>
<li><a href="#">咨询页</a></li>
<li><a href="#">联系我们</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">php</a>
</li>
<li>
<a href="#">java</a>
</li>
<li>
<a href="#">js</a>
</li>
</ul>
</li>
<li></li>
</ul>
<form action="" class="navbar-form navbar-right " >
<div class="form-group">
<input type="text" class="form-control" name="" placeholder="请输入">
<button type="submit" class="btn btn-info">搜索</button>
</div>
</form>
</div>
boostrap 分页:
.pagination
.active:选中
.disabled:禁用
« <<
» >>
<ul class="pagination">
<li><a href="">«</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li class="disabled"><a href="">7</a></li>
<li><a href="">»</a></li>
</ul>
bootstrap 缩略图
.thumbnail 给a标签一些样式 加个蓝框
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="./images/11.jpg" alt="" style="height:180px;width:100%;display:block;"/>
</a>
</div>
bootstrap 警告框
.alert :警告框
.alert alert-success :恭喜您操作成功
.alert alert-info :请确认密码
.alert alert-warning :您还有一次机会输入密码
.alert alert-danger :您的密码输入有误
带关闭按钮的alert
class="close" data-dismiss="alert"
× 按钮
.alert-dismissable : 带关闭按钮的alert
<div class="alert alert-danger alert-dismissable ">
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
列表项:
.list-group 列表组
.list-group-item 列表项
<div class="list-group">
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
</div>
bootstrap panel 面板
.panel-body 设置中部的样式
.panel-heading 设置头部的样式
.panel-footer 设置尾部的样式
.panel-default 默认的样式 灰
.panel-primary 原始的样式 蓝
.panel-success 成功的
.panel-danger 危险的
bootstrap 巨幕
.jumbotron :巨幕
<div class="jumbotron">
<div class="container">
<h1>web基础阶段告一段落!</h1>
<h1>这段时间认识大家很高兴</h1>
<p>但是,下一阶段还是我</p>
<p>
<a href="" class="btn btn-success btn-lg">更多</a>
</p>
</div>
</div>