HTML_08_bootstrap-初次见面
bootstrap介绍
是twitter的设计书设计的,是不是基于html css js的前端框架吧
bootstarp的是一种设备为为优先为优先的pc pad phone
解决多浏览器的话 兼容问题
转到 v3.bootcss.com
下载-解压-加入JQ于js文件夹
必须是html5
< link rel="stylesheet" href="bootstarp/css/bostrap.min.css">
必须先引进jq才可以引进bs
<script src="bootstarp/js/jquery.min.js">
<scipt src=”bootstarp/js/bootstrap.min.js>”
用于手机的自适应
<meta name="viewport" content="width=device-width,inital-scale=,user-scalable=no">
bootstrap 布局
<div calss="container"> 固定宽度1170px
——
</div>
<div calss="container-fluid"> 宽度10%
——
</div>
<h1></h1> 36px
<h2></h2>30px
<h3></h3>24px
<h4></h4>18px
<h5></h5>14px
<h6></h6>12px
.page-header 设置页头 给标题加一个分割线
<small></small>副标题 小一号
<big></big> 副标题 大一号
<strong></strong>推荐 使用加粗
<em></em> 推荐使用斜体
<del></del>删除线
文本对齐方式、
.text-left 左对齐
.text-right 右对齐对齐
.text-center 居中对齐
.text-uppercase大写
.text-lowercase 小写
.text-capitalize 首字母大写
列表
.list-unstyled 去掉列表前面的符号 和去掉所有的格式
list-inline 把li里面的内容 变成横向列表
自定义表格
.dl-horizontal 设置成横向
表格、class=“table table-border ”
.table 表格的基本类
.table-border 表格边框
.table-hover 鼠标悬停效果
.table-striped 斑马线效果 各行换色
.table-condensed 紧凑单元
给加table div父元素 table-responsive
移动设备为优先,如果不能完全显示,就会出现滚动条
.active
.success
.info
.danger
.warning
响应式图片
<img src ="imgages/1.jpg" class="img-responsive img-circle">
img-responsive 自适应
img-circle 圆形
img-rounded 圆角矩形
img-thumbnail 给图片加圆角的边框
栅格系统
一定要放入到容器中
<div class="container"></div>
<div class="container-fluid"></div>
作用 把浏览器最多分配到十二列 是有行row和列col
来页面布局中
一行有若干个列
div[class*="col-"]
<div class="container">
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-2</div>
<div class="col-md-1">col-md-3</div>
…………………………………………………………
<div class="col-md-1">col-md-12</div>
<div class="col-md-1">col-md-13</div>
<div class="col-md-1">col-md-14</div>
</div>
</div>
每行12列 如果多出来的就直接第二行
col-md-n 即是几列的
小于768 手机端 | col-xs- |
大于768 小于992平板 | col-sm- |
大于992 小于1200 | col-md- |
大于1200 | col-lg |
12列
4 2 4
<div class="col-md-3 col-xs-6 col-sm-4">123</div>
<div class="col-md-3 col-xs-6 col-sm-4">456</div>
<div class="col-md-3 col-xs-6 col-sm-4">789</div>
🐳 作者:hiszm 📢 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,万分感谢。 💬 留言:同时 , 如果文中有什么错误,欢迎指出。以免更多的人被误导。 |
![]() |