美文网首页
bootstrp的一些小点点

bootstrp的一些小点点

作者: 机智小铛铛i | 来源:发表于2018-01-23 11:11 被阅读17次

Bootstrap,来自 Twitter,emmm听说是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它有自带的css样式,也可以在此基础上自己添加css。emmmm 这两天练习了一下,并没有感觉有多么的简单,噗~~~

1.bootstrp模版

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

2.dropdown

<div class="dropdown">
        <button class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle = "dropdown">dropdown<span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labrlledby="dropdownMenu1">
            <li class="dropdown-header">Dropdown header</li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li class="disabled"><a href="#">Disabled link</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

3.按钮组

<div class="btn-group">
        <button class="btn btn-default">向左</button>
        <button class="btn btn-danger">中间</button>
        <button class="btn btn-default">向右</button>
    </div>
    
    <div class="btn-toolbar" role="toolbar" aria-label="...">
      <div class="btn-group btn-group-lg" role="group" aria-label="...">
        <button class="btn btn-default">向左</button>
        <button class="btn btn-danger">中间</button>
        <button class="btn btn-default">向右</button>
      </div>
      <div class="btn-group btn-group-sm" role="group" aria-label="...">
        <button class="btn btn-default">向左</button>
        <button class="btn btn-danger">中间</button>
        <button class="btn btn-default">向右</button>
      </div>
      <div class="btn-group btn-group-xs" role="group" aria-label="...">
        <button class="btn btn-default">向左</button>
        <button class="btn btn-danger">中间</button>
        <button class="btn btn-default">向右</button>
      </div>
    </div>

4、分裂式下拉菜单

<div class="btn-group">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <br />
    <br />
    <br />
    <div class="btn-group dropup">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

5.inputgroup

<div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Username"/>
    </div>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Username"/>
        <span class="input-group-addon">@</span>
    </div>
    <div class="input-group">
        <span class="input-group-addon">email</span>
        <input type="text" class="form-control" placeholder="Username"/>
        <span class="input-group-addon">Sure</span>
    </div>

6.表单

<form action="" method="post" role="form">
        <div class="form-group">
            <label for="username">用户名</label>
            <input name="username" id="username" type="text" class="form-control"><br />
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input name="password"  id="password" class="form-control"><br />
        </div>
        <div class="btn-group">
            <input type="submit" class="btn btn-success"/>
            <input type="reset" class="btn btn-danger" />
        </div>
        
    </form>

7.垂直表单

<span>按钮一</span> <span>按钮二</span> <span>按钮三</span>
    <form  class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
          </div>
          
          <div class="form-group">
            <label class="sr-only" for="exampleInputPassword3">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
          </div>
          
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        <button type="submit" class="btn btn-default">Sign in</button>
    </form>

8.横向表单

<form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
    </form>

9.导航

<ul class="nav nav-tabs" role="tablist">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              ...
            </ul>
        </li>
    </ul>
    <ul class="nav nav-pills" role="tablist">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              ...
            </ul>
        </li>
    </ul>
    <ul class="nav nav-pills nav-stacked" role="tablist">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              ...
            </ul>
        </li>
    </ul>
        <ul class="nav nav-pills nav-justified" role="tablist">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              ...
            </ul>
        </li>
    </ul>

10.导航条

<nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">
                    <img alt="Brand" src="img/01.png" />
                </a>
            </div>
        
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <button type="button" class="btn btn-default navbar-btn">Sign in</button>
        <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
        </div>
    </nav>

11.控件

    <form role="form" style="width: 400px;">
        <input type="date" class="form-control" />
        <input type="email" class="form-control" />
        <input type="color" />
        <input type="url" />
        <input type="submit" />
        
    </form>
    
    <form>
      <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state" disabled="disabled">
      <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state" readonly="readonly">
        
    </form>

12.栅格系统

<div class="container"> 
        <div class="row">
            <div class="bg-primary col-sm-2">A</div>
            <div class="bg-success col-sm-2">B</div>
            <div class="bg-info col-sm-2">C</div>
        </div>
    </div>

相关文章

  • bootstrp的一些小点点

    Bootstrap,来自 Twitter,emmm听说是目前最受欢迎的前端框架。Bootstrap 是基于 HTM...

  • Java类加载器

    一、JVM中的ClassLoader 1、Bootstrp loader(引导类加载器) Bootstrp加载器是...

  • Bootstrp

  • sass的一些小点点

    1、什么是sass? SASS是一种CSS的开发工具,是一种优秀的前端样式预处理器。提供了许多便利的写法,大大节省...

  • Java双亲委派机制

    类加载器bootstrp c++ 编写,开发者无法直接获取到启动类加载器的引用ext 如classpath中...

  • bootstrap

    最近做响应式的网站,涉及到Bootstrp的使用。我使用的版本是3.3.7bootstrap的核心精华是栅格系统 ...

  • 2020-05-07

    从前有个人叫小明,他的脸上有一些小点点,同学们都想他,因为那些小点点正好可以连成一个北斗7星,每个方向都有,7颗星...

  • 如何实现一个导航栏

    之前写导航栏都是为了方便,直接用的bootstrp里的类,这两天在学习jQuery,所以想自己实现一个,废话不多说...

  • bootstrp实战(1)--星巴克主页

    第一次尝试,还存在很多bug。。。网页中 img文件夹以及源码链接https://pan.baidu.com/s/...

  • Excel Outlook 快捷键

    有关办公软件的一些小整理,希望能够让你们效率提高一点点再一点点哦

网友评论

      本文标题:bootstrp的一些小点点

      本文链接:https://www.haomeiwen.com/subject/rmtsaxtx.html