`
Cb123456
  • 浏览: 66132 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

bootstrap

    博客分类:
  • web
阅读更多

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>

 

 主要:

 <!--1.加载bootstrap层叠样式表-->

 <!--2.加载JQuery库-->

 <!--3.加载bootstrap的核心-->

 

  一点效果:
 
 

 

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

 2.字体图标使用:

 <span class="glyphicon glyphicon-trash" aria-label="true"></span>

 其中:

 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:

 

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

 

  • 大小: 18.8 KB
  • 大小: 6.7 KB
  • 大小: 27.3 KB
  • 大小: 7 KB
  • 大小: 19.7 KB
  • 大小: 3.6 KB
分享到:
评论

相关推荐

    bootstrap bootstrap-3.3.7

    这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...

    Bootstrap5 图标库 bootstrap-icons

    Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源,它为开发者提供了大量美观、一致的SVG图标,可以方便地集成到Bootstrap5项目中,为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...

    bootstrap文件及bootstrap图标大全

    Bootstrap,由Twitter开发,是一款广泛应用于前端开发的开源框架,以其简洁、直观和强大的特性而闻名。Bootstrap 3.3.7是该框架的一个稳定版本,提供了丰富的组件、响应式设计以及易于定制的样式,旨在帮助开发者...

    Bootstrap后台登录界面模板_后台模板_bootstrap_

    Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和设计工具,使得构建响应式、移动优先的网站变得简单高效。在这个“Bootstrap后台登录界面模板”中,我们可以找到一个预设计好的登录页面...

    开发工具 dataTables.bootstrap.min

    开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...

    bootstrap 3.4.1 中文文档 离线

    bootstrap中文文档,实际上是将bootstrap整个站扒下来了,使用浏览器打开index.htm即可,注意编码格式为UTF-8,如果出现乱码考虑修改浏览器编码。 主要便于离线环境下前端开发使用。 Bootstrap 是最受欢迎的 HTML...

    bootstrap源码.rar

    Bootstrap是世界上最流行的前端开发框架,由Twitter的开发者创建,它为快速构建响应式、移动优先的网站提供了强大的工具。这个“bootstrap源码.rar”压缩包包含的正是Bootstrap框架的源代码,这对于理解其工作原理、...

    Bootstrap 图标库下载

    Bootstrap Icons:Bootstrap 有史以来第一次拥有自己的图标库,并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等。Bootstrap Icons ...

    bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js

    在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中,我们可以看到两个关键文件:`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件,经过压缩...

    bootstrap.min.js和bootstrap.min.css

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式、移动优先的网页项目。这个框架提供了丰富的组件、样式和JavaScript插件,极大地简化了网页设计和开发过程。在标题和描述中提到的"bootstrap.min.js...

    bootstrap布局设计器

    Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和设计工具,使得构建响应式、移动优先的网站变得简单高效。"Bootstrap布局设计器"是一个专门用于创建和编辑Bootstrap布局的工具,它可以...

    Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    Bootstrap栅格系统是一种基于12列的响应式布局框架,旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果,优化用户体验。Bootstrap栅格系统的...

    bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式布局和移动设备优先的Web项目。这个框架由Twitter的开发者创建,极大地简化了网页设计和开发流程。本压缩包包含两个版本的Bootstrap——3.4.1和4.6.1,...

    bootstrap评论列表模板

    Bootstrap评论列表模板是一种基于Bootstrap前端框架设计的网页组件,它为网站提供了一种标准化的、美观的、响应式的用户评论展示方式。Bootstrap是由Twitter开发并开源的,它是一套强大的前端开发工具集,包含了丰富...

    bootstrap实现的自适应页面简单应用示例

    Bootstrap实现的自适应页面简单应用示例 在本文中,我们将详细介绍Bootstrap实现的自适应页面简单应用示例,结合具体实例形式分析了基于Bootstrap的列表布局结构页面实现与使用技巧。 首先,让我们了解什么是...

    Bootstrap实现登录校验表单(带验证码)

    Bootstrap是一个流行的前端开发框架,用于快速构建响应式和移动优先的网站。在本文中,我们将探讨如何使用Bootstrap来创建一个带有验证码和验证功能的登录表单。 首先,要创建这样一个表单,我们需要引入Bootstrap...

    Bootstrap中文手册-v4.3.1.pdf

    Bootstrap 是一个广泛使用的前端开发框架,用于创建响应式网站和应用程序。它最初由 Twitter 的开发人员马克·奥托(Mark Otto)和雅各布·桑特森(Jacob Thornton)开发,并已成为世界上使用最广泛的开源前端框架之...

    bootstrap 期末项目 设计报告 模板

    Bootstrap 期末项目设计报告模板知识点总结 一、Bootstrap 介绍 Bootstrap 是一个流行的前端框架,用于构建响应式、mobile-first 的 Web 应用程序。它提供了一些常用的 HTML、CSS 和 JavaScript 组件,可以快速...

    bootstrap-5.3.2-dist.zip

    Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件、样式和JavaScript插件,用于快速构建响应式和移动优先的网站。这个压缩包“bootstrap-5.3.2-dist.zip”包含了Bootstrap 5.3.2的分布式文件...

    bootstrap3.3.5中文手册

    Bootstrap是世界上最受欢迎的前端开发框架,它为创建响应式、移动优先的网站提供了一套强大的工具。Bootstrap3.3.5是该框架的一个稳定版本,它优化了对各种设备的适应性,使得开发者能够轻松地构建一致且美观的界面...

Global site tag (gtag.js) - Google Analytics