码迷,mamicode.com
首页 > 其他好文 > 详细

【BootStrap】初步教程

时间:2015-07-15 13:22:29      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:bootstrap   css   

<span style="font-family: Arial, Helvetica, sans-serif;">最近刚刚接触到BootStrap,在这里总结一下BootStrap的使用方法。</span>

1、BootStrap的下载

      Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。即可以在不下载BootStrap的情况下使用BootStrap。

  BootStrap中文网网址:http://www.bootcss.com/


2、在页面中引用BootStrap

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!--<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>-->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!--<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">-->

在没有下载BootStrap的时候,引用BootStrap中文网为我们提供的css库和js库。当我们下载BootStrap的时候,则引用本地的库文件:

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script src="js/bootstrap.min.js"></script> <!-- 解压后的本地文件 -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/jquery-2.1.4.min.js">


3、使用BootStrap为我们提供的样式和效果

在页面中我们只需要引用BootStrap为我们写好的类选择器即可获得BootStrap的各种效果。比如:

(1)按钮样式:

技术分享

*按钮的大小采用.btn-large.btn-small, 或 .btn-mini

通过添加.btn-block 创建块级按钮, 同时会填充整个父级的宽度

技术分享
*按钮的可用与否采用.disabled

技术分享


其他的就不多说了,以上示例来自BootStrap官网。


说明:以上示例来自http://bootstrap.kinghack.com/base-css.html,大家也可以通过这个网站来学习BootStrap的使用。









版权声明:本文为博主原创文章,未经博主允许不得转载。

【BootStrap】初步教程

标签:bootstrap   css   

原文地址:http://blog.csdn.net/qq_29329775/article/details/46889901

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!