你的位置:首页 > 网页设计

[网页设计]boostrap预定义样式风格


  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>

      View Code

    • 除了上述的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>

      View Code