bootstrap样式代码案例

简介: bootstrap样式代码案例

运行结果如下所示:

代码如下所示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
    
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <style type="text/css">
      .container{
        border: 1px solid black;
      }
      .row{
        border: 1px solid black;
      }
      .row div{
        border:1px solid black;
      }
      #sjdis{
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-1">
          一等分
        </div>
        <div class="col-md-1">
          一等分
        </div>
        <div class="col-md-1 col-md-offset-1">
          一等分
        </div>
        <div class="col-md-4 col-md-offset-3">
          一等分
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          四等分
        </div>
        <div class="col-md-8">
          八等分
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="row">
            <div class="col-md-4">
              6等分
            </div>
            <div class="col-md-6">
              6等分
            </div>
            <div class="col-md-2">
              2等分
            </div>
          </div>
        </div>
        <div class="col-md-4">
          四等分
        </div>
        <div class="col-md-4">
          四等分
        </div>
      </div>
    </div>
    <span class="h1">我是h1</span>
      <span class="h2">我是h2</span>
      <span class="h3">我是h3</span>
      <span class="h4">我是h4</span>
      <span class="h5">我是h5</span>
      <span class="h6">我是h6</span>
      
      <span class="lead">测试文字</span><br />
      <p class="text-left">左对齐</p>
      <p class="text-right">右对齐</p>
      <p class="text-center">居中对齐</p>
      <p class="text-justify">两端对齐</p>
      <br />
      列表
      <ul class="list-inline">
        <li>首页</li>
        <li>岗位课</li>
        <li>商城</li>
        <li>关于我们</li>
      </ul>
      <br />
      表单:
      <form class="form-horizontal" action="" method="post">
        <div class="form-group">
          <span class="text-center col-sm-2">姓名:</span>
          <div class="col-sm-10">
            <input type="text" class="form-control input-lg" />
          </div>
          
        </div>
        <div class="form-group">
          邮箱:<input type="email" class="form-control input-sm" />
        </div>
        <input type="submit" class="form-control" value="提交"/>
      </form>
      <br />
      按钮:
      <input type="button" class="btn btn-default" value="灰色" />
      <br />
      <input type="button" class="btn btn-primary" value="深蓝色" />
      <br />
      <input type="button" class="btn btn-success" value="绿色" />
      <div id="sjdis">
        
      </div>
  </body>
  <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
  <script type="text/javascript" src="js/bootstrap.js" ></script>
</html>


相关文章
|
1月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
7月前
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
43 0
|
1月前
|
前端开发 数据可视化 算法
r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享
r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享
|
1月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
|
1月前
|
前端开发 JavaScript 容器
bootstrap样式
bootstrap样式
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
59 0
|
1月前
|
前端开发 JavaScript
BootStrap使用笔记+案例(下)
BootStrap使用笔记+案例
24 0
|
1月前
|
前端开发 Python
BootStrap使用笔记+案例(上)
BootStrap使用笔记+案例
42 0
|
1月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
47 0
|
7月前
|
前端开发
如何去掉bootstrap table中表格样式中横线竖线
如何去掉bootstrap table中表格样式中横线竖线
70 0