bootstrap

最新推荐文章于 2021-01-19 02:28:03 发布

iteye_4194

最新推荐文章于 2021-01-19 02:28:03 发布

阅读量124

点赞数

分类专栏： web 文章标签： BootStrap ViewUI

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Bootstrap:

1.下载Bootstrap:

2.在页面中运用:

<!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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!--1.加载bootstrap层叠样式表-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!--2.加载JQuery库-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    
    <!--3.加载bootstrap的核心-->
	<script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  </body>
</html>

主要:

一点效果:

------------------------------------------------------------------

2.字体图标使用:

其中:

1.图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上

2.现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性

一点效果:

---------------------------------------------------------------------------------------------------------------------------------

3.按钮:

一点样式:

代码:

<a class="btn" href="#" role="button">Link</a>
<a class="btn btn-default" href="#" role="button">Link-btn</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="submit" vaule="Submit"/>
<input class="btn btn-default" type="button" value="Input">

<hr>
<!--样式-->
<button  type="button" class="btn btn-default">default</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-success">success</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-danger">danger</button>
<button type="button" class="btn btn-link">Link</button>

<hr>
<!--size-->
<button type="button" class="btn btn-default btn-lg">（大）btn-lg</button>
<button type="button" class="btn btn-default">（默认尺寸）Defaul</button>
<button type="button" class="btn btn-default btn-sm">（小）btn-sm</button>
 <button type="button" class="btn btn-default btn-xs">（超小）btn-xs</button>
 
<hr>
<!--快级-->
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>

<hr>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

------------------------------------------------------------------

2015.11.18：神奇的http:

下拉菜单:

搞了半天，一直没出来，然后，，，最后发现需要加上http:,呵呵

官网源码:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

----------------------------------------------------------------

按钮组和按钮工具栏:

一点源码:

 <!--按钮组-->
 <div class="btn-group" role="group">
  <button type="button" class="btn btn-default">left</button>
   <button type="button" class="btn btn-default">left</button>
   <button type="button" class="btn btn-default">left</button>
 </div>
 <hr>
  
  <!--按钮工具栏-->
 
     <div class="btn-toolbar" role="toolbar">
         <div class="btn-group btn-group-lg" role="group">
          <button type="button" class="btn btn-default">left</button>
           <button type="button" class="btn btn-default">left</button>
           <button type="button" class="btn btn-default">left</button>
         </div>
         
          <div class="btn-group btn-group-sm" role="group">
          <button type="button" class="btn btn-default">left</button>
           <button type="button" class="btn btn-default">left</button>
           <button type="button" class="btn btn-default">left</button>
         </div>
         
          <div class="btn-group btn-group-xs" role="group">
          <button type="button" class="btn btn-default">left</button>
           <button type="button" class="btn btn-default">left</button>
           <button type="button" class="btn btn-default">left</button>
         </div>
     
     </div>
  
<hr>
<div class="btn-group" role="group" >
  <button type="button" class="btn btn-info">1</button>
  <button type="button" class="btn btn-info">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>
<hr>
<div class="btn-group btn-group-justified" role="group">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

-----------------------------------------------------------------------------------------------------------------------------------

下拉菜单:

官方源码；

  <hr>
   <div class="btn-group">
       <button type="button" class="btn btn-success" data-toggle="dropdown">
          Action <span class="caret"></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>
   
   <hr>
   <!-- Split button -->
<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>

Have a question?What is the class sr-only used for? Is it important or can I remove it? Works fine without.

What is the class sr-only used for? Is it important or can I remove it? Works fine without.

It's important, don't remove it.

You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn't see a visual difference.

If you're interested in reading about accessibility:

--------------------------------------------------------------------------------------------