星空网 > 软件开发 > 网页设计

boostrap预定义样式风格

  1. 预定义样式分为五种:primary(首选项)、success(成功)、info(一般信息)、warning(警告)、danger(危险),demo如下,设置不同的class展示不同的样式
    • boostrap预定义样式风格boostrap预定义样式风格
      <!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='/images/loading.gif' data-original="js/jquery-2.1.3.js"></script>  <script src='/images/loading.gif' data-original="js/bootstrap.js"></script></html>

      View Code

      boostrap预定义样式风格

    • 除了上述的btn-*外还有其他的一些class,比如(bg | text | alert)-(primary | success | info | warning | danger)等,可分别设置不同的样式
  2. 如下是一个面板控件
    • 网址:http://v3.bootcss.com/components/#panels
    • 一个面板的小demo代码以及效果图如下boostrap预定义样式风格boostrap预定义样式风格
      <!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='/images/loading.gif' data-original="js/jquery-2.1.3.js"></script>  <script src='/images/loading.gif' data-original="js/bootstrap.js"></script></html>

      View Code

      boostrap预定义样式风格




原标题:boostrap预定义样式风格

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流