1. 预定义样式分为五种：primary（首选项）、success（成功）、info（一般信息）、warning（警告）、danger（危险），demo如下，设置不同的class展示不同的样式

    • <!DOCTYPE HTML>
      
<html>
      
    <head>
      
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      
        <title>无标题文档</title>
      
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href="css/bootstrap.css">
      
        <style>
      
            .glyphicon-heart {font-size: 100px; color: red;}
      
        </style>
      
    </head>
      
<body>

<div class="container">
      
    <input type="button" value="默认样式" />
      
    <input type="button" class="btn btn-primary" value="首选项" />
      
    <input type="button" class="btn btn-success" value="成功" />
      
    <input type="button" class="btn btn-info" value="一般信息" />
      
    <input type="button" class="btn btn-warning" value="警告" />
      
    <input type="button" class="btn btn-danger" value="危险" />

</div>

</body>
      
    <script src="js/jquery-2.1.3.js"></script>
      
    <script src="js/bootstrap.js"></script>
      
</html>

    • 除了上述的btn-*外还有其他的一些class，比如（bg | text | alert)-(primary | success | info | warning | danger)等，可分别设置不同的样式
  2. 如下是一个面板控件
    • 网址：http://v3.bootcss.com/components/#panels
    • 一个面板的小demo代码以及效果图如下 
      <!DOCTYPE HTML>
      
<html>
      
    <head>
      
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      
        <title>无标题文档</title>
      
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href="css/bootstrap.css">
      
        <style>
      
            .glyphicon-heart {font-size: 100px; color: red;}
      
        </style>
      
    </head>
      
<body>

<div class="container">
      
    <div class="panel panel-primary">
      
        <div class="panel-heading">
      
            <h3>我是面板的标题</h3>
      
        </div>
      
        <div class="panel-body">
      
            我是面板的主体内容
      
        </div>
      
    </div>
      
</div>

</body>
      
    <script src="js/jquery-2.1.3.js"></script>
      
    <script src="js/bootstrap.js"></script>
      
</html>

boostrap预定义样式风格的更多相关文章

  1. bootstrap 预定义样式风格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Android预定义样式

    字体大小 对于能够显示文字的控件(如TextView EditText RadioButton Button CheckBox Chronometer等等),你有时需要控制字体的大小.Android平 ...

  3. Sass预定义一些常用的样式

    一.编写sass文件时, 目录不能有中文, 如: E:\\CPC手机, 会报错exception while processing events: incompatible character enc ...

  4. Linux学习--第十天--bash脚本、用户自定义变量、环境变量、位置参数变量、预定义变量、标准输入输出、wc、history、dd、PS1

    shell简介 分为两种c shell 和b shell b shell:sh.ksh.Bash.psh.zsh: (Bash和sh兼容,linux基本shell是Bash) c shell:csh. ...

  5. arcgis api for js共享干货系列之二自定义Navigation控件样式风格

    arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...

  6. WebService -- Java 实现之 CXF ( 添加系统预定义的拦截器）

    1. 概述 CXF允许我们在webservice的in/out位置添加拦截器.拦截器有两大分类,一类是系统预定义的:另一类是自定义拦截器. 2. 在server端添加拦截器. JaxWsServerF ...

  7. [Sass]不同样式风格的输出方法

    [Sass]不同样式风格的输出方法 众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写.在 Sass 中编译出来的样式风格也可以按不同的样式 ...

  8. PHP预定义接口之 ArrayAccess

    最近这段时间回家过年了,博客也没有更新,感觉少学习了好多东西,也错失了好多的学习机会,就像大家在春节抢红包时常说的一句话:一不留神错过了好几亿.废话少说,这篇博客给大家说说关于PHP预定义接口中常用到 ...

  9. .NET中那些所谓的新语法之三：系统预定义委托与Lambda表达式

    开篇:在上一篇中,我们了解了匿名类.匿名方法与扩展方法等所谓的新语法,这一篇我们继续征程,看看系统预定义委托(Action/Func/Predicate)和超爱的Lambda表达式.为了方便码农们,. ...

随机推荐

  1. JavaScript设计模式之构造函数模式

    一.构造函数模式概念 构造函数用于创建特定类型的对象——不仅声明了使用过的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值.你可以自定义自己的构造函数,然后在里面声明自定义类型对象 ...

  2. Extjs中Chart利用series的tips属性设置鼠标划过时显示数据

    效果如下: 从官网找到的例子,大家参考下吧.源码: Ext.require('Ext.chart.*'); Ext.require('Ext.layout.container.Fit'); Ext.o ...

  3. js ie浏览器下的选中操作

    最近在学习jquery  好多英文网站,制作一个网站的副本,可以主动地学习.好像给自己的网站添加一个小词典,就像沪江小d那样. js试了好几种方法 实在不行,网上搜索了下 ,用到了浏览器开发.本篇文章 ...

  4. Apache下PHP的几种工作方式

    PHP在Apache中一共有三种工作方式:CGI模式.Apache模块DLL.FastCGI模式. 一.CGI模式 PHP 在 Apache 2中的 CGI模式.编辑Apache 配置文件httpd. ...

  5. django 序列化json问题

    from django.core import serializers @login_required def ajax_get_data(request): json_data = serializ ...

  6. ppt怎么换背景图片|PPT换背景设置方法

    PPT怎么换背景?PPT背景可谓是PPT幻灯片的灵魂,优美绚丽的PPT背景能为自己做的PPT幻灯片锦上添花.今天,格子啦小编就教大家PPT换背景的方法,让你不再羡慕别人所做PPT的美丽背景,也可以自己 ...

  7. bzoj4306: 玩具厂

    Description 在JIH考察的地图中有N个城市,被公路依次连成了一个环,JIH想在这些城市中建一个玩具厂.城市和公路都被编号为1..N,i号公路连接i-1号城市与i号城市(1号公路连接N号城市 ...

  8. 反射-b

    Class pkClass=NSClassFromString(@"PKAddPassesViewController");    if (pkClass) {        NS ...

  9. Do's and Don'ts for Android development

    Do's and Don'ts for Android development, by Futurice developers Use Gradle and its recommended proje ...

  10. 查看Linux发行版的名称和版本号

    Method #1: /etc/*-release file 在Terminal中执行命令: cat /etc/*-release 我的输出结果: DISTRIB_ID=Ubuntu DISTRIB_ ...