BootStrap学习与实践(一)

BootStrap是什么?

BootStrap是基于HTML、CSS、JS的一个非常优秀的前端框架,只需要简单的代码就可以快速搭建好一组前端的界面,对于后端开发的看官,只需要关注自己的业务逻辑开发,而不用费太多心思去琢磨界面设计,省去不少的精力和时间;

BootStrap的特点

兼容大部分jQuery插件,做了更为人性化的设计和完善;
可以开发全响应式网页,不论手机,平板,个人电脑浏览网站内容,所有元素优雅的呈现,兼容性特别好;
可以对其进行二次开发,可以选择基于BootStrap的环境使用自己开发的组件;等等

BootStrap下载

1)完整版
你可以登陆http://v3.bootcss.com 点击页面中的下载BootStrap按钮下载完整版。
2)按需下载
如果你感觉整个BootStrap文件有些大的话,你也可按需定制你所需要的部分。 你可以访问http://v3.bootcss.com/customize/ 在线定制css、组件、javascript插件。

使用本地BootStrap文件

这样做,可以有效地避免因为断网而无法使用的问题,下载下来放入本地项目中:

下载的文件放入本地的项目中

bootstrap.min.css放在类似stylesheets这样专门放CSS的文件夹。把js文件——bootstrap.min.js放在类似Scripts文件夹中;

在页面中去引用bootStrap的

将BootStrap的文件bootstrap.min.css、bootstrap.min.js引入当前页面中,由于BootStrap是基于Jquery的,所以在引入它的js文件之前,一定要先引入Jquery.js。注意:这里考虑到文件大小,我们引入了min版的文件,当然,你也可以引入完整版的文件。
在HTML页面中引入的代码如下,一般会设置标题,和utf-8的编码:

<head>
<meta charset="utf-8">
<title>BootStrap引用文件</title>

<!-- Bootstrap 核心 CSS 文件 --></p>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>

<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="/scripts/bootstrap.min.js"></script>
</head>

使用BootStrap的CDN

如果你对你的网路环境很有信心,而又不想费事下载BootStrap,那么,你可以使用互联网上提供的CDN服务。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用BootStrap CDN</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <h1>这里使用了BootStrap CDN</h1>
</body>
</html>

BootStrap栅格布局

BootStrap栅格布局是灵活使用BootStrap的基础。BootStrap将屏幕分为12等分,在具体的DIV中,可以通过设置DIV的所占等分的数字确定其在屏幕中占有的宽度.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>BootStrap栅格布局</title>
    <!-- Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

    <!-- jQuery文件 -->
    <script src="/scripts/jquery.min.js"></script>

    <!-- Bootstrap 核心 JavaScript 文件 -->
    <script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row"><!--表示另起一行-->
      <div class="col-md-8 col-xs-8" style="color:blue;border:1px solid black;height:100px;">DIV1</div>
      <div class="col-md-4 col-xs-4" style="color:red;border:1px solid black;height:100px;">DIV2</div>
  </div>
  </div>
</body>
</html>

解析:
在第一个DIV中class=”col-md-8”,第二个DIV中class=”col-md-4”, 其中‘8’和‘4’就是其DIV所占屏幕宽度的数值,加在一起等于‘12’。也就是第一个DIV占整个屏幕宽度的‘8/12’,第二个DIV占‘4/12’。 注:在上述代码中为了突显区块,我们设置了DIV的边框宽度为1像素黑色实线,高度设为100像素。

BootStrap是一种全响应的技术

针对不同的显示屏幕尺寸,BootStrap提供了不同的栅格布局的属性:
1)col-xs-* 超小屏幕 手机 (<768px)
2)col-sm-* 小屏幕 平板 (≥768px)
3)col-md-* 中等屏幕 桌面显示器 (≥992px)
4)col-lg-* 大屏幕 大桌面显示器 (≥1200px)
需求:设置成超小屏幕尺寸,DIV所占屏幕为4;

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>BootStrap栅格使用</title>
    <!--BootStrap的核心CSS文件-->
    <link ref="stylesheet" href="/stylesheets/bootstrap.min.css">
    <!--jQuery文件-->
    <script src="/scripts/jquery.min.js"></script>
    <!--BootStrap核心JS文件-->
    <script src="scripts/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row"><!--表示另起一行-->
      <div class="col-xs-4" style="border:1px solid red;height:100px">DIV1</div>
  </div>
  </div>
</body>
</html>

多个布局属性

如果想让div在不同的屏幕中显示出不同的尺寸,其实也很容易实现,因为BootStrap支持多个布局属性的设置,
如果要求:该DIV在中等屏幕中占有‘8/12’,在手机中占有‘6/12’,在大屏幕中占有屏幕比例的‘4/12’,代码应该如下:

 <div class="row">
      <div class="col-md-8 col-xs-6 col-lg-4"></div>
  </div>

获得BootStrap资源

登录BootStrap中文网,获取所有的BootStrap资源,包括基本的CSS、组件、JavaScript插件等;

IT文库 » BootStrap学习与实践(一)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址