-Bootstrap介绍
基于html css js的超强前端框架
bootstrap以移动设备为优先
所有主流浏览器都兼容
-bootstrap环境
引入方法1:
v3.bootcss.com
下载bootstrap,解压
fonts-字体库文件
css-bootstrap.css未压缩的css
bootstrap.min.css压缩css
js-bootstrap.js未压缩的js
bootstrap.min.js压缩js
必须有jquery.min.js
通过http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js下载
<!--引入外部bootstrap的css文件-->
<
link
rel
=
"stylesheet"
href
=
"bootstrap/css/bootstrap.min.css"
>
<!--先引入jquery之后再引入js文件-->
<
script
src
=
"bootstrap/js/jquery.min.js"
></
script
>
<!--引入bootstrap.min.js-->
<
script
src
=
"bootstrap/js/bootstrap.min.js"
></
script
>
引入方法2:
如果联网环境下,联网配置环境
直接在head里粘贴
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<
link
rel
=
"stylesheet"
href
=
"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity
=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin
=
"anonymous"
>
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<
link
rel
=
"stylesheet"
href
=
"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity
=
"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin
=
"anonymous"
>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<
script
src
=
"https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity
=
"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin
=
"anonymous"
></
script
>
-以移动设备为优先
<!--屏幕和设备的屏幕一致,初始缩放为1:1,禁止用户缩放-->
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1,user-scalable=no"
>
-bootstrap布局
<
div
class
=
"container"
>
固定宽带 1170px
</
div
>
<
div
class
=
"container-fluid"
>
宽度为100%
</
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-center
text-right右对齐
text-left左对齐
<
h1
class
=
"page-header text-center"
>
产品展示
</
h1
>
英文大小写
text-uppercase
text-loercase
text-capitalize首字母大小写
-列表
<
ul
class
=
"list-unstyled list-inline"
>
去掉原有格式 把
<
li
></
li
>
变成横向
自定义列表
<
dl
class
=
"dl-horizontal"
>
<
dt
>
标题
</
dt
>
<
dd
>
内容
</
dd
>
</
dl
>
变成横向
-表格
<
table
class
=
"table"
>
基类
<
table
class
=
"table table-bordered"
>
边框
<
table
class
=
"table table-hover"
>
鼠标悬停
<
table
class
=
"table table-striped"
>
隔行换色
<
table
class
=
"table table-condensed"
>
padding减半 紧凑
响应式 给父容器加class="table-responsive"
<
div
class
=
"table-responsive"
>
<
table
class
=
"table table-bordered table-hover table-striped table-condensed"
>
在小屏幕上表格会有滚动条
-状态类
设置的是tr或td
.active 悬停的颜色
.success标识成功的颜色
.info提示
.danger危险
.warning警告
-响应式图片
<
img
src
=
"images/1.jpg"
class
=
"img-responsive"
>
图片大小随窗口改变
img-circle
图片变椭圆形
img-rounded
图片变圆角矩形
img-thumbnail
给图片加圆角外边框
通常和栅格系统一起用
-栅格系统
一定要放入容器中:
<
div
class
=
"container-fluid"
></
div
>
浏览器窗口自动分配最多12列,栅格系统是由行row和列col
创建页面布局
<
h1
>
需求
</
h1
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-2"
>
22
</
div
>
<
div
class
=
"col-md-3"
>
33
</
div
>
<
div
class
=
"col-md-7"
>
77
</
div
>
</
div
>
必须在行row中
手机端数字
平板数字
常规数字
大屏数字
-偏移
只能向右偏移
col-md-offset-2 pc中屏幕向右偏移两列
-排序(了解)
col-xs/sm/md/lg-pull-4 向左偏移4
col-xs/sm/md/lg-push-2 向右偏移2
-辅助类
情景文本颜色:
.text-muted柔和
.text-success成功
.text-info信息
.text-danger危险
.text-primary初始
.text-warning警告
背景文本颜色:
同情景除去muted
.bg-success
...
下拉三角:
<span class="caret"></span>
快速浮动:
左浮动
<div class="pull-left">
清除浮动:
.clearfix 给父盒子加
-表单
<!-- 复选框 -->
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" name="hobby">睡觉</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">旅游</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">学习</label>
<label class="checkbox-inline disabled"><input type="checkbox" name="hobby disabled="" ">唱歌</label>
</div>
<!-- 单选框 -->
<div class="form-group">
<label class="radio-inline"><input type="radio" name="sex" value="1">男</label>
<label class="radio-inline"><input type="radio" name="sex" value="0">女</label>
</div>
.form-control 给输入框加<input> <textarea></textarea>
.form-group 给输入框的父元素加 ,给外面包含的盒子加<div class=”form-group”>
.checkbox-inline 给label 标签加给包含<input >和内容加样式
.radio-inline 给label 标签加,给<input >和内容加样式
.input-group-addon 给给组合的内容加
.input-group 给父元素加
表单行内显示给表单加 .form-inline
.form-horizontal 给表单加<form>
变成响应式效果 ---必须结合栅格系统
注意:输入框不能使用栅格系统,给<div ><span>…给这类的标签加
按钮
可以加按钮效果的有哪些标签
<input type=”button” value=”
按钮
”>
<button>
按钮
</button>
<a href=”#”>
内容
</a>
.btn
是按钮样式的基类
按钮样式
.btn-primary .btn-default .btn-success .btn-warning .btn-danger
按钮的大小
.btn-lg
(最大的)
.btn-sm .btn-xs
(最小的)
按钮组 给父元素加 .btn-group
下拉菜单
-
.dropdown-menu 给下拉列表中的内容给 ul 加样式
-
.dropdown 包含触发的按钮和下拉列表加样式 --- 父元素
-
.Data-toggle 按钮的触发器
-
.dropdown-menu-left 下拉列表的对齐 .dropdown-menu-right 右对齐
-
.divider 给 <li> 加 <li></li> 之间没有内容
导航栏
-
navbar :导航栏的基类,用于 <nav> 元素。
-
.navbar-default :导航栏默认样式,用于 <nav> 元素。
-
.container 是 <nav> 的子元素。导航栏内容都放入其中。
-
.navbar-header :导航栏头部样式。
-
.collapse 是折叠导航栏的样式的基类。列表 <ul> 父元素加
-
.navbar-collapse 是折叠导航栏样式。 给 ul 的父元素加
-
.nav 是导航栏的链接基类。 <ul>
-
.navbar-nav 是导航栏的链接样式 。 <ul>
-
.navbar-left 或 .navbar-right :组件排列。导航链接、按钮或文本对齐。
-
.navbar-fixed-top :导航栏固定在顶部,用于 <nav> 元素。需要为 <body> 设置 padding-top:70px
-
.navbar-fixed-bottom :导航栏固定在底部,用于 <nav> 元素
-
.navbar-inverse :可以实现反色导航栏,用于 <nav> 元素。
-