介绍:基于html css javascript 的前端框架
特点:是以移动设备为优先,pc 平板 手机
引入:
第一种:下载本地,然后下载jQuery;
第二种:联网状态,导入链接
<meta charset="UTF-8">
<!--移动设备优先,屏幕和设备的屏幕一致,初始缩放为1:1,禁止用户缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>引入方式<\title>
<!--引入bootstrap主题文件-->
<link rel="stylesheet" href="dis/css/bootstrap.min.css">
<!--引入jQuery文件,在引入js之前要先引入jquery-->
<script scr="dis/js/jquery.min.js">
<!--引入js文件-->
<script scr="dis/js/bootstarp.min.js">
布局:
div:
<div class="container-fluid"> 宽度为100%
<div class="container"> 宽度为1170px
<h1 class="page-header"> 线
排版的标签:
<h1> 36px
<h2> 30px
<h3> 24px
<h4> 18px
<h5> 14px
<h6> 12px
<h1 class="page-header"> 页头加线
<small> 小一号的标题
<p> 段落 12px的字体
<big> 大一号的标题
<strong> 推荐使用的加粗
<em> 推荐使用
<del>删除线
文本的对其方式:
.text-left、center、right
text-uppercase:英文全大写
text-lowercase:英文全小写
text-capitalize:英文首字母大写
列表:
ist-unstyled:无系统样式
list-inline:列表进行水平布局
自定义列表:
<dl class="dl-horizontal"> : 横向排列
表格:
class="table" 表格的一个基类
.table-bordered 加线
.table-hove 加鼠标悬停
.table-striped 加斑马线效果,隔行换色
.table-condensed 表格紧凑
给table的父元素加table-responsive 响应式栅格(可随尺寸变化而变化)
响应式图片:
class="imgrasponsive" //响应式
图片形状:
img-circle 椭圆形
img-rounded 圆角矩形
img-thumbnail 给图片加圆角的边框
例:class="imgrasponsive img-thumbnail"
一般配合栅格系统使用
栅格系统:
栅格系统一定要放在容器里。
栅格系统,浏览器窗口自动分配最多12列,栅格系统是把屏幕分割最多12列
必须要有容器,div="container",在div里写div class="row",在row里写col
栅格的响应式效果表:
小于798px 手机端 col-xs
大于798px 小于992px 平板 col-sm
大于992px 小于1200px pc col-md
大于1200px 大屏 col-lg
例:
//pc占3块 平板占4块 手机占6块偏移:offset(只能向右偏移)
col-xs/sm/md/lg-offset-3 ,那么偏移就是col-md-offset-3
排序:pull(可以向左偏移,也可以向右偏移,需要计算)
col-xs/sm/md/lg-pull 向左偏移
col-xs/sm/md/lg-push 向右偏移
辅助样式:
情景文本颜色:.text-muted(柔和) .text-success .text-primary .text-info .text-warning .text-danger
背景文本颜色:.bg-success .bgt-primary .bg-info .bg-warning .bg-danger
下拉的三角:
快速浮动: pull-left 左浮动 pull-right 右浮动
清除浮动: clearfix 给父盒子加
表单:
表单分组:<div class="form-group">