您的位置：首页 > Web前端 > BootStrap

bootstrap笔记第一天

2015-09-09 20:46 465 查看

一、如何使用bootstrap

      （1）、加载Bootstrap层叠样式表

              代码如下：

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

      （2）、加载jQuery库，且该库必须加载在bootstrap之前

              代码如下：

                              <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

      （3）、加载bootstrap的核心

             代码如下：

                             <script="cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

二、移动设备优先

      [b]Bootstrap 是移动设备优先的     [/b]

为了确保适当的绘制和触屏缩放，需要在

<head>

之中添加
viewport 元数据标签。

复制

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为

user-scalable=no

可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。

完成的书写方式：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

三、使用字体图标
            在v3.bootcss.com中找到字体图标，然后在HTML中定义span标签，使得标签的id=字体图标的名字即可

      例:

          <span class="glyphicon glyphicon-euro"></span>

          <span class="glyphicon glyphicon-heart"></span>

四、按钮的样式

              bootstarp提供了一组样式，使用方法如下

           标准的定义方法如下：

          <button type="button" class="btn btn-default btn-lg">default</button>

          <button type="button" class="btn btn-primary btn-sm">primary</button>

          <button type="button" class="btn btn-success btn-xs">success</button>

          也可以这样定义：

<button class="btn btn-info">info</button>

      <button class="btn btn-warning">warning</button>

      <button class="btn btn-danger">danger</button>

   <button class="btn btn-link">link</button>

      通过实例不难看出，其中btn-default、 btn-primary、btn-success等都是用来调节按钮的颜色的，而btn-lg、
btn-sm、btn-xs是用来调节按钮的大小的。

      不光<button>可以这样修改按钮样式，<a>、<input>都可以修改按钮样式、还可以在样式中加入字体图标。

代码如下：

      <input type="button" class="btn btn-success" value="input">

   <a href="#" class="btn btn-warnin" role="button">a link</a>

   <input type="submit" class="btn btn-danger" value="submit">

   <button class="btn btn-info btn-lg"><span class="glyphicon glyphicon-heart"></span>info</button>

<button>的激活状态：

      当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于

<button>

元素，是通过

:active

状态实现的。对于

<a>

元素，是通过

.active

类实现的。然而，你还可以将

.active

应用到

<button>

上（包含

aria-pressed="true"

属性)），并通过编程的方式使其处于激活状态。

代码如下：

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航