Bootstrap 探索之旅
探索前的准备
Bootstrap 是一个快速搭建网站的框架,我们如果说需要使用这个框架,我们需要引用它。
引用一个框架有两种方式
下载文件引入
1、通过官网的下载包将其引入在项目css文件和js文件。
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">
<script type="text/javascript" src="dist/js/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
* Bootstrap框架是基于JQuery的一个框架,所以需要在引入bootstrap框架前引入JQuery框架
下载的Bootstrap文件是不存在JQuery,所以我们需要去JQuery的官网里去下载JQuery文件。
2、通过在线CDN引入
推荐: BootCDN 是服务器在国内的且范围广泛的的一个在线CDN网站。
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
开始探索Bootstrap
我们引入完成后就正式的将Bootstrap框架搭建完成,现在就开始我们的探索之旅吧~
内置样式的简单运用
Bootstrap是可以快速的搭建网页,其原因就是它为我们完成了表单,按钮等等组件的样式封装。我们无需再写样式即可设计出简洁好看的样式。
<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
我们以按钮为例子,我们发现我们将按钮分为了七种样式default默认
,primary首选项
,success成功
,info信息
,warning警告
,danger微信
,link连接
;分成了四种尺寸xs超小尺寸
,sm小尺寸
,默认尺寸
,lg大尺寸
。
这些Bootstrap为我们封装好的样式我们直接来调用,机器缩短了我们的时间,当然如果要在这里举例子做演示的画是不可能的,因为大部分的例子大同小异,而且Bootstrap的单词量高达1000+,所以更多的需要我们实践的过程进行积累。
栅格系统
如果说Bootstrap仅仅只是一个简单的样式的封装,那么他的存在的意义不是很大,Bootstrap的运用的重点是栅格系统。
我们都知道在写页面布局的时候用<table>
表格可以很快的进行元素对齐,但是<table>
表格及其增加了代码的可维护性的难度,为了解决这一个问题于是便有了栅格系统这一个概念。
栅格系统是将每一行分为12个格子,设置每个元素所占用的格子数,快速的对齐和布局。
<div class="container">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div>
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-3">4</div>
<div class="col-md-4">5</div>
</div>
</div>
col-md-1
的写法是不是超级像<table>
表格跨列的使用,但是我们可能不太明白md
的含义。
类前缀 | 描述 |
---|---|
.col-xs- | 超小屏幕 |
.col-sm- | 小屏幕 |
.col-md- | 中等屏幕 |
.col-lg- | 大屏幕 |
要说Bootstrap的精华之处也就在这里了,我们可以设置不同大小屏幕下的元素所占用的格子数,这便是响应式了。
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">2</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-xs-12">4</div>
<div class="col-lg-4 col-md-1 col-sm-6 col-xs-12">5</div>
</div>
</div>
列偏移(col-md-offset-)
有些时候我们并不能想占满12个格子,也并不想从第一个的格子开始。
我们每创建一行(.row)
,下一行的格子会另取一行;
每个元素偏移一定的格子.col-md-offset-
,就会从偏移的格子数开始。**
<div class="row">
<div class="col-md-1">1</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-1">2</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-2">3</div>
</div>
如果一行超出了12个格子,那么会另取一行。
<div class="col-md-12">1</div>
<div class="col-md-1">2</div>
列排序(col-md-push- / col-md-pull-)
列排序顾名思义将元素进行一个排序,但是我个人认为在这里比喻的很抽象;列排序有col-md-push-
和col-md-pull-
,我是这样理解它们的。
col-md-push-
是将元素推过去n格
col-md-pull-
是将元素拉回来n格
<div class="row">
<div class="col-md-8">1</div>
<div class="col-md-4">2</div>
</div>
<div class="row">
<div class="col-md-8 col-md-push-4">1</div>
<div class="col-md-4 col-md-pull-8">2</div>
</div>
如上所示,我们将第二行的元素1推过去4格,将元素2拉回来8格,这样就实现了元素在md
屏幕下元素的反转,而在其他屏幕下不反转。
元素可见性(.visible-)
除了可以响应式的改变元素的所占比例,偏移和排序外,还可以通过不同大小屏幕的控制元素的显示隐藏。
<div class="visible-xs">xs超小屏</div>
<div class="visible-sm">sm小屏</div>
<div class="visible-md">md中屏</div>
<div class="visible-lg">lg大屏</div>
以上都是一下静态的样式的封装,我们在刚刚引入文件的过程中我们也引入了JavaScript的文件,那么除了一些响应式的布局,还有一些动画,我们看看简单的例子。
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">LOGO</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">首页</a></li>
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
</ul>
</div>
</div>
</nav>
这就是Bootstrap的魅力所在了,用最少的代码,做更多的事情;当然js部门还有其他的部分,因为涉及到JQuery的部分,我们暂时写到这里,后期还会再继续分享Bootstrap的js部分。