首页 > 代码库 > bootstrap

bootstrap

2024-09-29 18:32:39   219人阅读

http://blog.csdn.net/yang5726685/article/details/68957301

 

灵活优雅的前端工具集。

基于h5 和css3。

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架，bootstrap 2 兼容性好 bootstrap3 放弃兼容性。

技术分享

技术分享

让视口的宽度等于你屏幕的大小。初次不缩放。

技术分享

技术分享

 

 

 

bootstrap是移动设备优先的，它针对移动设备的样式融合进了框架的每个角落
初始化框架使用的是Normalize.css
栅格结构(grid system)
栅格布局中所有的行必须放在class为container的容器中.
通过一系列的行（row）与列（column）的组合来创建页面布局, 自动分为最多12列,内容在列中.

 基本模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href=http://www.mamicode.com/"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://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src=http://www.mamicode.com/"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src=http://www.mamicode.com/"js/bootstrap.min.js"></script>
  </body>
</html>

 

bootstrap


联系
我们