本帖最后由 小刀葛小伦 于 2018-6-28 14:15 编辑
今天我们来大概了解一下bootstrap
1、概述
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问
2、引入Bootstrap文件(注意版本)
2.1、CSS
<!-- 引入BootStrap的CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
2.2、JS
<!-- 引入JS-->
这里说明一下，因为bootstrap是基于html,css,和jquery做的一个封装，想要使用bootstrap里面的特有功能，那么就一定要先引入jquery文件。
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
3、全局CSS
3.1、viewport 元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1">
确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签
在meta 里面添加user-scalable=no 可以禁用其缩放（zooming）功能
3.2、布局
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
.container 类用于固定宽度并支持响应式布局的容器。
3.3、栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
3.3.1行
使用.row样式定义栅格的行.
3.3.2列
.col-lg-n
.col-md-n
.col-sm-n
.col-xs-n
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
3.4、排版
<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
3.5、对齐
<p class="text-left">Left aligned text.</p> //左
<p class="text-center">Center aligned text.</p> //中
<p class="text-right">Right aligned text.</p> //右
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
3.6、改变大小写
<p class="text-lowercase">Lowercased text.</p> // 小写
<p class="text-uppercase">Uppercased text.</p> // 大写
<p class="text-capitalize">Capitalized text.</p> //无改变
3.7、表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
例如： <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
4、组件
4.1、导航条：
默认导航条
<nav class="navbar navbar-default">
反色导航条，并在顶部
<nav class="navbar navbar-inverse navbar-fixed-top">
4.2、小横岗
<span class="icon-bar"></span>
4.3、下拉
<li class="dropdown">
4.4、分割线
<li role="separator" class="divider"></li>
5、JS插件
5.1、图片轮播：
[HTML] 纯文本查看 复制代码
<ol class="carousel-indicators">
<!--这是三个小点-->
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- 这是左右的小于和大于号 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
这就是对bootstrap的最基本使用，当然前端框架，我们后面还会涉及到其他的，不要慌，因为前端的都简单！~希望大家后面学习稳抓稳打的！加油！~
| 
收藏
淘帖
踩
