Bootstrap框架

-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> 元素。