Bootstrap介绍1

最新推荐文章于 2022-07-19 20:46:36 发布
最新推荐文章于 2022-07-19 20:46:36 发布
阅读量625 收藏
点赞数
分类专栏： Web前端 文章标签： bootstrap css框架 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hztzhn0528/article/details/41547323
版权

Bootstrap(Web前端CSS框架)是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。


Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。


Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等



样例:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Bootstrap -->
   <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">


<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">


  </head>
  <body>


<nav class="navbar navbar-inverse"  style = "width:100%;"role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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-brandhref="#">i分享</a>
    </div>


    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">


        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span></a>
          <ul class="dropdown-menu" role="menu">
          <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 发送给朋友</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-asterisk"></span> 分享到朋友圈</a></li>
             <li class="divider"></li>
            <li><a href="#"><span class="glyphicon glyphicon-paperclip"></span> 收藏</a></li>
           
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<div class="page-header text-center">
   <h3>页面标题实例
      <small>子标题</small>
   </h3>
</div>


<div class="container">
   <div class="row">
      <div class="col-xs-6">
      <div style = "color:gray;">浏览次数：100</div>
      </div>
      <div class="col-xs-6">
      <div class = "pull-right" style = "color:gray;float:left"><span class="glyphicon glyphicon-comment"></span>50</div>
      <div class = "pull-right" style = "color:gray;float:left">  &nbsp;&nbsp;&nbsp; </div>
       <div class = "pull-right" style = "color:gray;float:left"><span class="glyphicon glyphicon-thumbs-up"></span>24</div>
      </div>      
   </div>
</div>


<br/>
<div class="container"  style = "width:100%;">
<div class="jumbotron" style = "background-color:gray;width:100%;">





<div class="container" style = "width:100%;">
<div class="row" style = "width:100%;">
   <div class="thumbnail" style = "width:100%;">
     <img src="http://img4.duitang.com/uploads/item/201403/21/20140321110244_wLzkJ.jpeg" alt="...">
     <div class="caption">
        <h3>那些年我们一起追过的</h3>


     </div>
   </div>
</div>

<div class="row">
   <div class="thumbnail">
     <img src="http://wenwen.soso.com/p/20110326/20110326231615-552400580.jpg" alt="...">
     <div class="caption">
        <h3>那些年我们一起追过的</h3>


       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>

     </div>
   </div>
</div>
<div class="row">
   <div class="thumbnail">
     <img src="http://ww2.sinaimg.cn/mw600/c206c74ejw1e3lp6v1j89j.jpg" alt="...">
     <div class="caption">
        <h3>那些年我们一起追过的</h3>
 
       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>

     </div>
   </div>
</div>
<div class="row">
   <div class="thumbnail">
     <img src="http://img2.duitang.com/uploads/item/201302/15/20130215100358_GFHws.thumb.600_0.gif" alt="...">
     <div class="caption">
        <h3>那些年我们一起追过的</h3>
  
       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>

     </div>
   </div>
</div>

<div class="row">
   <div class="thumbnail">
     <img src="http://www.waihuift.com/img/aHR0cDovL3d3NC5zaW5haW1nLmNuL213NjAwL2MyMDZjNzRlancxZTNscDloZWszc2ouanBn.jpg" alt="...">
     <div class="caption">
        <h3>那些年我们一起追过的</h3>
     
       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>

     </div>
   </div>
</div>

<div class="row">
   <div class="thumbnail">
     <img src="http://img.159.com/desk/user/2012/7/8/Jiker201260193328750.jpg" alt="...">
     <div class="caption">
        <h3>那些年我们一起追过的</h3>
       
       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>

     </div>
   </div>
</div>




<div class="row">
   <div class="thumbnail">
     <img src="http://pic.159.com/desk/user/2012/7/8/Jiker201260193321546.jpg" alt="...">
     <div class="caption">
        <h3>那些年我们一起追过的</h3>
       
       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>

     </div>
   </div>
</div>




<div class="row">
   <div class="thumbnail">
     <img src="http://gameui.mobi/wp-content/uploads/2013/09/IMG_2872.png" alt="...">
     <div class="caption">
       <h3>绘一场生死契阔的游戏</h3>
       <p>路过的风景、有没有人为你好好收藏</p>
<p>我在漫天风雪的回忆里披荆斩棘、你却在哪一个的字典里演绎皈依。</p>
       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>
       
     </div>
   </div>
</div>

<div class="row">
   <div class="thumbnail">
     <img src="http://gameui.mobi/wp-content/uploads/2013/08/IMG_2629.png" alt="...">
     <div class="caption">
        <h3>我们的火，要把世界点燃</h3>
      <p>太阳尚远，但终有太阳</p><p>年华里，我们失去的是一种心情。</p>
       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>
     
     </div>
   </div>
</div>


<div class="row">


     <img src="http://gameui.mobi/wp-content/uploads/2013/07/IMG_2408.png" alt="...">


        <h3>展翅飞翔</h3>
      <p>女巫亲吻过的咒语破天而来、浇湿的誓言漉漉退场、我坐在海上补一张网、你伏在海底披星戴月的歌唱。</p>
       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>





</div>



<div class="row">
   <div class="thumbnail">
     <img src="http://www.uimaker.com/uploads/allimg/110920/1_110920090853_1.jpeg" alt="...">
     <div class="caption">
        <h3>展翅飞翔</h3>
      <p>女巫亲吻过的咒语破天而来、浇湿的誓言漉漉退场、我坐在海上补一张网、你伏在海底披星戴月的歌唱。</p>
       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>

     </div>
   </div>
</div>


<div class="row">
   <div class="thumbnail">
     <img src="http://www.uimaker.com/uploads/allimg/110920/1_110920090853_8.jpeg" alt="...">
     <div class="caption">
        <h3>展翅飞翔</h3>
      <p>女巫亲吻过的咒语破天而来、浇湿的誓言漉漉退场、我坐在海上补一张网、你伏在海底披星戴月的歌唱。</p>
       <p><button style="width: auto;display: table;margin-left: auto;margin-right: auto;" class="btn  btn-success" type="button"><span class="glyphicon glyphicon-thumbs-up"></span>赞一个 <span class="badge">8</span></button></p>

     </div>
   </div>
</div>

<div class = "row">

  <div class="thumbnail">
     <img src="http://www.uimaker.com/uploads/allimg/110920/1_110920090853_8.jpeg" alt="...">
     <div class="caption">
      <p>女巫亲吻过的咒语破天而来、浇湿的誓言漉漉退场、我坐在海上补一张网、你伏在海底披星戴月的歌唱。</p>


     </div>
   </div>
</div>    




<div class="row" >
   <div class="thumbnail">  
<div class="caption">
           
<div class="input-group input-group-lg">
 <span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
 <textarea class="form-control" style = "height:100px;"rows="3" placeholder="请输入评论内容" ></textarea>
</div>
   <a class="btn btn-primary btn-lg pull-right"  role="button">评论</a>
   <button class="btn btn-primary btn-lg pull-right" data-toggle="modal" 
  data-target="#myModal">
  签名
</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
  aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
     <div class="modal-content">
        <div class="modal-header">
           <button type="button" class="close" 
              data-dismiss="modal" aria-hidden="true">
                 &times;
           </button>
           <h4 class="modal-title" id="myModalLabel">
              评论签名
           </h4>
        </div>
        <div class="modal-body">
           <input type="text" class="form-control" placeholder="请输入签名">
        </div>
        <div class="modal-footer">
           <button type="button" class="btn btn-default" 
              data-dismiss="modal">关闭
           </button>
           <button type="button" class="btn btn-primary" data-dismiss="modal">
              提交
           </button>
        </div>
     </div><!-- /.modal-content -->
</div><!-- /.modal -->


   
</div>
<br/>
<br/>
<div class="caption">
<blockquote><small  class = "text-primary" ><span class="glyphicon glyphicon-user"></span>匿名<cite title="Source Title"> 2014.11.11 13:59:03 </cite></small>
<p>这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p>
</blockquote>

<blockquote ><small  class = "text-primary"><span class="glyphicon glyphicon-user"></span>匿名<cite title="Source Title">5天前</cite></small>
<p>这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p>
</blockquote>
</div>
   </div>
</div>
</div>


<br/>
<br/>
<br/>
<br/>
  <div class="container">
    <p><a class="btn btn-success btn-lg" href="#" role="button"><span class="glyphicon glyphicon-save"></span>下载客户端,观看更流畅</a></p>
  </div>


</div>
</div>




<div style = "background-color:gray;">
<br/>
<p>
<h4 class="text-center">云端科技团队荣誉出品</h4>
</p>
 <p class="text-center">
<h8>
<a href = "http://www.intimenews.icoc.cc">公司信息</a> （京ICP备08011363号）@1993-2014 cdv Inc
</h8>
 </p>
</div>






    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </body>
</html>

hztzhn0528
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap是什么
weixin_34088838的博客
03-13 100
Bootstrap是什么 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更...
windows下 bootstrap重新编译定制
jiangzhenlove的专栏
09-26 3665
有时候想用bootstrap但是有的东西觉得又不适合，所以想重新编译一下 1安装node.js 2安装grunt-cli 3安装less 4修改bootstrap less，进入bootstrap目录编译 安装好node.js 后安装grunt npm install -g grunt-cli 安装less 进入目录重新编译一下试试
UE4 iOS Packaged Game Size
痞子龙3D编程
11-11 1200
Unreal Engine 4.9 iOS Game Development There are a number of things that affect the size of a packaged iOS game, from the content it references to the build configuration you choose.
【Termux】无法安装bootstrap package的解决方案
牛顿的三棱镜的博客
07-19 5353
Termux无法安装bootstrap package的解决方案
Bootstrap 是最受欢迎的
11-20
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如W
bootstrap响应式自我介绍网站模板
04-02
Bootstrap响应式自我介绍网站模板是基于流行的前端框架Bootstrap构建的网页设计模板，特别适用于个人展示、简历或在线自我介绍。Bootstrap是由Twitter开发并开源的一款强大的HTML、CSS和JS工具包，它提供了丰富的...
23.0 Bootstrap 框架1
最新发布
10-06
`23.0 Bootstrap 框架1.md`文件可能是一个Markdown格式的教程或者笔记，详细介绍了如何开始使用Bootstrap，包括如何引入Bootstrap库，如何设置基本的HTML结构，以及如何利用Bootstrap的类来美化元素，如按钮、表单、...
第1章 Bootstrap介绍
02-23
### Bootstrap介绍 #### 一、Bootstrap概述 Bootstrap是一款广受欢迎的前端开发框架，它由Twitter公司的两位工程师在2010年为了简化前端开发过程而创立。随着时间的发展，Bootstrap不断迭代升级，最终在2011年8月...
Bootstrap文档1
08-04
Bootstrap 文档1 Bootstrap 是一个流行的前端框架，提供了丰富的组件和插件，可以帮助开发者快速构建响应式的Web应用程序。在这篇文档中，我们将介绍 Bootstrap 的三个组件功能：小图标组件、下拉菜单组件和按钮...
个性创意bootstrap个人介绍网站模板
04-02
这个"个性创意bootstrap个人介绍网站模板"充分利用了Bootstrap的灵活性和强大的功能，旨在为个人展示提供一个创新且吸引人的平台。下面我们将深入探讨这个模板所包含的知识点。 首先，Bootstrap的核心组件包括栅格...
bootstrap资源
04-26
bootstrap基础资源，包括所用到的css,js，以及font，学习bootstrap必备
Twitter Bootstrap（Web前端CSS框架）
xinjiatao的专栏
05-05 362
中文学习网：http://www.bootcss.com/ http://v3.bootcss.com/css/
Twitter Bootstrap：前端框架利器
crazy--李阳
10-19 1705
Web前端开发者每天都与HTML、CSS、JavaScript打交道，然而不少人都是周而复始地写模板、样式和交互效果，并没有想过如何将这些重复的工作整合在一起。Twitter推出的Bootstrap能够帮助Web前端开发者摆脱这种重复劳动。 Bootstrap的历史 为了应对复杂的需求，早期的Twitter前端工程师在开发网站时几乎采用了所有自己熟悉的前端库。造成了网站维护困难、扩
bootstrap框架（一）：bootstrap简介与安装
一点一滴铺就人生
07-16 2035
文章目录一、bootstrap简介二、安装bootstrap1、npm下载bootstrap到本地进行安装（1）切到项目路径下（2）生成package文件（3）下载bootstrap3、jquery（4）导入css、js文件2、采用cdn方式导入bootstrap 一、bootstrap简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Boo
如何把循环的按钮都添加模态框_游戏中的卡片模态面板设计[1]—运用案例分析...
weixin_39985842的博客
11-22 78
游戏设计中往往遇到被要求同一界面内增加太多信息、同一环节中增加太多操作。卡片模态面板的展示应用是2020年交互设计趋势之一，属于玩家操作交互方式，也是“结构层”的知识范畴。这次尝试利用卡片模态面板处理游戏中内容和操作过多的问题，之后在游戏设计中的运用方向以及如何发散思维扩展。内容预览1.什么是卡片模态面板2.卡片模态面板特点3.卡片模态面板游戏使用场景案例简析1.什么是卡片模态面板1）什么是模态面...
The 'Microsoft.Data.Entity.Design.BootstrapPackage.BootstrapPackage, Microsoft.Data.Entity.Design.Bo
Never too late to study
11-12 1814
安装了VS2010，打开工程提示如下： The 'Microsoft.Data.Entity.Design.BootstrapPackage.BootstrapPackage, Microsoft.Data.Entity.Design.BootstrapPackage, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d
UE4 打包后出现This program is used for packaged games and is not meant to be run directly解决
Deveuper的博客
11-16 2506
打包UE4项目后，运行出现This program is used for packaged games and is not meant to be run directly 原因，没有打包成功，但控制台显示已完成 解决办法，删除当前打包的文件夹重新打包即可 ...
IDEA——错误: 找不到或无法加载主类 com.Main
热门推荐
gxx_csdn的博客
01-14 19万+
昨天在使用IDEA创建了一个普通Java项目，执行main()方法时，程序报错如下： “错误: 找不到或无法加载主类 com.Main Process finished with exit code 1”， 我确信自己的java jdk安装和环境变量配置（java jdk安装和环境变量配置）正确无误，而程序只是一个再简单不过的打印而已：package com; public class Main
scrapy爬取电影网站
hello_SW的博客
12-02 721
new_movie.py 定义爬虫 import scrapy import re import urllib from ..items import NewMovieItem class new_movie(scrapy.Spider): name='new_movie' start_urls=['http://www.87movie.com/tag/喜剧'] allowed_d
bootstrap介绍
05-04
1. 响应式设计：Bootstrap提供了一套响应式的CSS框架，可以根据浏览器窗口大小自动调整网页布局。 2. 样式丰富：Bootstrap提供了大量的CSS样式和组件，可以轻松实现按钮、表单、导航栏、弹出框等常见UI元素。 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值