bootstrap入门

一、bootstrap是什么

　　bootstrap是一个封装了前端三剑客的前端框架

　　更多技术请参考 bootstrap官网于 w3cschool 菜鸟教程等

　　官网：http://www.bootcss.com/

 　　　　<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

二、搭建环境

　　1.离线环境

　　http://v3.bootcss.com/ 中下载生产环境的zip文件，进行解压。（实际上，官网为我们提供了在线i引入的链接(类比jQuery)）

　　//其中：　fonts是字体文件夹

　　　　　　 CSS是包含css的(文件夹内有压缩(-min名称的)与未压缩)，我们推荐使用压缩的

　　　　　　JS文件是包含的一些JS文件，其中需要注意的是，从官网很容易看出是依赖jQuery的，我们按照官网的地址去下载对应的jQuery:

　　　　　　我们打开这个网址，右键另存为，保存这个jQuery（文件名等不要作改动），放到js文件夹中即可！

　　　　　　我们在页面中做如下引入便可：

<!doctype html>
<html lang="en">
<head>
    <!--设置移动设备优先，屏幕和设备尺寸一致，1：1比例，禁止缩放 -->
  <meta name="viewport" content="width=device-width,initial-scale=1,user-
  scalable=no">
    <meta charset="UTF-8">
    <title>Document</title>
  <!-- 引入外部的css文件-->
  <link rel="stylesheet" href="bootstrapcssootstrap.min.css">
  <!-- 先引入jQuery，再引入js-->
  <script src="bootstrapjsjqueryj.min.js"> </script>
  <script src="bootstrapjsootstrap.min.js"> </script>
</head>
<body>
      <div></div>
    <h1 class="page-header">产品展示</h1>
      <h3 class="page-header">详情页面</h3>
</body>
</html>

　　2.在线环境

　　直接前往官网查看最新的引入方式（会实时的更新）

三、常用布局

可以参见：http://caibaojian.com/bootstrap/base-css.html

　　1.布局容器　　

　　2.排版的标签

　　　　1.标题：

　　　　　　h1-h6　

　　　　　　字体样式等都已经定义好了

　　　　　　　　page-header ——设置页头

　　　　　　　　<em>——加粗（或<strong>）

　　　　　　　　<small>——设置小一号的副标题

　　　　　　　　<big>——设置大一号的副标题

　　　　　　　　<del>——设置删除线

　　　　　　此小段演示代码：

<body style="background: gray;">
      <div class="container-fluid" style="background: #ffffff">
    <h1 class="page-header">产品展示</h1>
      <h3 class="page-header">详情<big>副标题</big>页面<small>副标题</small></h3>
      <p>
        对HTML基本元素进行样式定义，并利用可扩展的class增强其展示效果.<del>已废弃</del>
      </p>
      </div>
</body>

　　　　　　演示效果：

//注意下面的水平线等

　　　　2.文本对齐方式：

　　　　　　text-left——左对齐

　　　　　　text-center——居中对齐

　　　　　　text-right——右对齐

　　例如：

　　　3.字母大小写变换：

　　　　　text-uppercase——字母都变大写

　　　　　text-lowercase——字母都变小写

　　　　　text-capitalize——首字母大写

　　例如：　　

　　　　<p class="text-lowercase">
　　　　　　对HTML基本元素进行样式定义，并利用可扩展的class增强其展示效果.<del>已废弃</del>
　　　　</p>
　　　　<p class="text-capitalize">
　　　　　　对HTML基本元素进行样式定义，并利用可扩展的class增强其展示效果.<del>已废弃</del>
　　　　</p>

　　　4.列表标签

　　　　list-unstyled——去掉列表前面的符号和格式

　　　　list-inline——列表由纵向变横向

　　例如：

　　　　自定义列表

　　　　dl-horizontal——设置变为横向排列

　　　　代码风格

　　　　　　见官方文档的介绍

　　　5.表格标签

　　　　.table——表格的一个基类，其他的样式都是基于此基类（.表示css的类选择器）

　　　　.-table-bordered——加外边框

　　　　.table-hover——鼠标悬停效果

　　　　.table-striped——斑马线效果（隔行变色）

　　　　.table-condensed——padding值减半，表格更加紧凑

　　例如：

　　效果：

　　响应式表格：

　　　　给上述table添加一个父元素：

　　　　　　.table-responsive

　　　　　　状态类：

　　详细请参见官网全局CSS样式：http://v3.bootcss.com/css/#tables

　例如：　

　　效果：

　　更多效果，请参见上文的官网的全局CSS样式处

　　　　6.响应式图片

　　img-responsive

　　例如：

　　设置图片形状（例如给图片外边加圆角矩形框）——更多实例，请参见上文官网处

　　img-thumbnail

　　　　7,栅格系统

　　通常，栅格系统是和响应式图片一起使用，并且，它必须放入容器中！

　　　　浏览器最多自动分成12份（超出自动换行），通过一系列的行和列来组成

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

　　　　其中，md是中等的简写

　　有了上面的样式，我们把内容 col-1等换成第六点的图片(可以改为响应式)，即可完成！

　　　　更多如响应式的请参见官网文档：栅格参数

　　　　栅格系统偏移与排列待补充

　　　　8.辅助类

　　字体颜色

<p class="text-muted">...</p> 
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
　　效果可以参见官网，背景颜色不再赘述
三角符号

　　<span class="caret"></span>
//即使用了bootstrap，之前的样式也需要适当地添加

　　　9.表单
前面看到的表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。
不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">

输入框变圆角：form-control

　　表单控件加上类form-control后，效果为：

- 　　宽度为100%
- 　　设置边框为浅灰色
- 　　控件具有4px的圆角
- 　　设置阴影效果，元素得到焦点时，阴影和边框效果会发生变化
- 　　设置placeholder的颜色为#999

　例如（div盒子为隔行分开）：

<div class="form-group">
　　　　<label for="emial">邮箱</label>
　　　　<input type="emial" name="cemail" id="cemail" class="form-control" />
　　</div>
　　<div class="form-group">
　　　　<label for="pwd">密码</label>
　　　　<input type="password" name="pwd" id="pwd" class="form-control" /></div>

在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名

<div class="form-group has-success">

很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：

<div class="form-group has-success has-feedback">
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。

　下拉框

　　给select 加 .form-control

复选框

<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>
　　</div>

　　禁止选择（加属性）： <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" disabled="" />打豆豆</label>

　　单个复选框

从上面的示例，我们可以得知：
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内

　单选框

　　禁止类同上文

　输入框组

　　详细的请参见：bootstrap的组件部分

　　效果演示：

　　响应式表单

给表单加 .form-horizontal ，结合栅格系统，实现响应式表单：<form class="form-horizontal">

　　按钮

.btn是按钮样式的基类，以下为基本样式

　　强烈建议使用button或a标签来制作按钮

　　激活：（鼠标悬停时点亮，离开时熄灭）

　　按钮大小：

　　按钮组：给父元素（父盒子）

<div class="btn-group">
　　　　<button class="btn btn-primary">按钮组1</button>
　　　　<button class="btn btn-primary">按钮组2</button>
　　　　<button class="btn btn-primary">按钮组3</button>
　　</div>

　　10.缩略图

　　　　暂不演示，见官网文档，和栅格系统一起使用

　　11.下拉菜单

　　　　演示效果：

　　12.标签页

　　　　（属于组件->导航->标签页）

　　　　.nav 是标签类的一个基类

　　纵向等效果见官网文档，（active是默认激活项）

　　13.导航

　二级导航：

<ul class="nav nav-pills">
     <li class="active"><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="##">CSS3</a></li>
            …
       </ul>
     </li>
     <li><a href="##">关于我们</a></li>
</ul>

　　面包屑导航：见文档路径导航

　　导航条：

<div class="navbar navbar-default" role="navigation">
 <ul class="nav navbar-nav">
  <li class="active"><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>
</div>

　　而导航条的颜色都是通过“.navbar-default”来进行控制

　　导航栏标题与二级导航：

<!--加入导航条标题-->
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
    <ul class="nav navbar-nav">
       <li class="active"><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>
</div>
<!--导航条状态及二级菜单-->
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
    <ul class="nav navbar-nav">
         <li class="active"><a href="##">网站首页</a></li>
        <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
          </ul>
       </li>
       <li><a href="##">名师介绍</a></li>
       <li><a href="##">成功案例</a></li>
       <li><a href="##">关于我们</a></li>
    </ul>
</div>

View Code

　　导航栏遮住内容解决办法1：（第二种是直接把导航栏放在内容之前）

　<style>
body{
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
　　</style>

　　响应式导航栏：

<!--代码-->
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
       <a href="##" class="navbar-brand">慕课网</a>
  </div>
  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
              <li class="active"><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>
  </div>
</div>

View Code

　　14.分页

1、通过“pagination-lg”让分页导航变大；

2、通过“pagination-sm”让分页导航变小

　　标签的new样式：（右上角出现new）

<h3>今日更新<span class="label label-primary"  style="vertical-align:super; font-size:8px;">New</span></h3>

　　进度条：

　　　　基础版

<div class="progress">
       <div class="progress-bar" style="40%"></div>
</div>

　　　　彩色版见官网

　　媒体对象：

媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：

☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片

☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

☑ 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

　　通过多个li定义列表：

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src=" " alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media Header</h4>
            <div>…</div>
        </div>
    </li>
    <li class="media">…</li>
    <li class="media">…</li>
</ul>

　　js插件

模态框：（基于jQuery的操作）

<!--模态框-->
    <button class="btn btn-primary" type="button">点击我
    </button>
    <div class="modal fade" id="mymodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">模态弹出窗标题</h4>
                </div>
                <div class="modal-body">
                    <p>即将爆炸</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">剪线</button>
                    <button type="button" class="btn btn-primary">逃跑</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
<script>
  $(function(){
    $(".btn").click(function(){
      $("#mymodal").modal("toggle");
    });
  });
</script>

View Code

　　改用触发器触发（而不是js）

 <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>

1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；

2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。

如何通过按钮关闭模态框：

   　　　　 　　<div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>

//模态框需设置为fade才有过滤效果

　　collapse 手风琴

　　　　注意点：

　　　　　　data-parent="#accordion"必须要，不然点击另一个触发器的时候，本来的触发器的内容不会消失

　　　　　　这里的触发也是和上面的一样有两种形式：声明式属性、js

　　　　简易版的架构实现：

<div class="panel-group" id="myAccordion">
        <div class="panel panel-accordion panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">标题一</h4>
                </div>
                <div class="panel-collapse">
                    <div class="panel-body">折叠区内容...</div>
                </div>
        </div>
        <div class="panel panel-accordion panel-default">
            <div class="panel-heading">
                    <h4 class="panel-title">标题二</h4>
                </div>
                <div class="panel-collapse">
                    <div class="panel-body">折叠区内容...</div>
                </div>
        </div>
        <div class="panel panel-accordion panel-default">
            <div class="panel-heading">
                    <h4 class="panel-title">标题三</h4>
                </div>
                <div class="panel-collapse">
                    <div class="panel-body">折叠区内容...</div>
                </div>
        </div>
    </div>

View Code

　　　　再将标题和内容绑定：

 <div class="panel-heading">
            <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
        </div>
        <div class="panel-collapse" id="panel1">
            <div class="panel-body">折叠区内容...</div>
        </div

View Code

　　　　再设置内容是否可见（第一个可见追加一个in）

<div class="panel-collapse collapse" id="panel1">

　　　　配置声明式触发：

<h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4>

　　　　<a>时，因为有href,data-toggle可以去掉

　　　　配置一个打开时关闭其他：

　　　　　　 <h4 class="panel-title">
                <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
            </h4>

　　carouser 图片轮播　　

　　一个轮播图片主要包括三个部分：

　　　　 ☑ 轮播的图片

　　　　☑ 轮播图片的计数器

　　　　 ☑ 轮播图片的控制器

　　设计轮播图片的容器

<div id="slidershow" class="carousel"></div>

　　设计轮播图片计数器

<ol class="carousel-indicators">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        ...
    </ol>

//在 Bootstrap 框架中，轮播图片计数器，都是以圆点向大家呈现

　　设计轮播图片播放区

 <div class="carousel-inner">
                <div class="item active">
                <a href="##"><img src="1.jpg" alt="风景1"></a>
            </div>
            <div class="item">
                <a href="##"><img src="2.jpg" alt="风景2"></a>
            </div>
            <div class="item">
                <a href="##"><img src="3.jpg" alt="风景3"></a>
            </div>
            </div>

View Code

　　设计轮播图片控制器

//这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片：

放出轮播代码：

 <div id="slidershow" class="carousel">
    <ol class="carousel-indicators">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
            <div class="carousel-caption">
                <h3>图片标题1</h3>
                <p>描述内容1...</p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
            <div class="carousel-caption">
                <h3>图片标题2</h3>
                <p>描述内容2...</p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
            <div class="carousel-caption">
                <h3>图片标题3</h3>
                <p>描述内容3...</p>
            </div>
        </div>
        <!-- 设置轮播图片控制器 -->
        <a class="left carousel-control" href="" >
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
  </div>

//应对拉伸整个页面，给父元素包裹div加一个width就行了，

参见：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap的js插件</title>
    <!-- 引入外部的css文件-->
    <link rel="stylesheet" href="bootstrapcssootstrap.min.css">
    <!-- 先引入jQuery，再引入js-->
    <script src="bootstrapjsjquery.min.js"> </script>
    <script src="bootstrapjsootstrap.min.js"> </script>
</head>
<body>
    <div class="panel-group" id="myAccordion">
        <div class="panel panel-accordion panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" >标题一</a></h4>
                </div>
                <div class="panel-collapse collapse in" id="panel1">
                    <div class="panel-body">折叠区内容...</div>
                </div>
        </div>
        <div class="panel panel-accordion panel-default">
            <div class="panel-heading">
                    <h4 class="panel-title"><a href="#panel2" data-toggle="collapse" >标题二</a></h4>
                </div>
                <div class="panel-collapse collapse" id="panel2">
                    <div class="panel-body">折叠区内容...</div>
                </div>
        </div>
        <div class="panel panel-accordion panel-default">
            <div class="panel-heading">
                    <h4 class="panel-title"><a href="#panel3" data-toggle="collapse" >标题三</a></h4>
                </div>
                <div class="panel-collapse collapse" id="panel3">
                    <div class="panel-body">折叠区内容...</div>
                </div>
        </div>
    </div>
    <div style=" 200px">
        <div id="slidershow" class="carousel" data-ride="carousel">
        <ol class="carousel-indicators">
            <li class="active" data-target="#slidershow" data-slide-to="0">1</li>
            <li data-target="#slidershow" data-slide-to="1">2</li>
            <li data-target="#slidershow" data-slide-to="2">3</li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                <img src="1.jpg" alt="风景1">
            </div>
            <div class="item">
                <img src="2.jpg" alt="风景2">
            </div>
            <div class="item">
                <img src="3.jpg" alt="风景3">
            </div>
            </div>
            <a class="left carousel-control" href="#slidershow" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#slidershow"  data-slide="next">
            <span class="glyphicon glyphicon-chevron-right">
            </span>
        </a>
    </div>
    </div>
    
</body>
</html>

View Code

通过js进行轮播：

$(function(){
    $("#slidershow").carousel({
        interval:2000
    });
    $("#slidershow a.left").click(function(){
        $(".carousel").carousel("prev");
    });
    $("#slidershow a.right").click(function(){
        $(".carousel").carousel("next");
    });
});

//或者通过类名调用

　　　设计的时候，注意从整体的页面结构开始，从整体到局部

相关阅读:
bzoj4849: [Neerc2016]Mole Tunnels
bzoj 4069~4071 APIO2015
bzoj 4885: [Lydsy2017年5月月赛]长方体
 bzoj4891: [Tjoi2017]龙舟
 bzoj4892: [Tjoi2017]dna
bzoj 3159: 决战
 bzoj3672: [Noi2014]购票
 bzoj4738: 汽水
 bzoj 4737: 组合数问题
 bzoj 4872: [Shoi2017]分手是祝愿
原文地址：https://www.cnblogs.com/jiangbei/p/7045652.html