• 当前标签:Bootstrap

程序开发 学习Bootstrap的全局CSS样式

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 适用于: 同一份代码既要适用桌面也要适应手机平板 认同Bootstrap的设计语言和设计风格 不适用: 只做手机页面(可以考虑其他针对性比较强的框架)   不能接受Bootstrap的设计语言和设计风格 改造Bootstrap有时付出的代价会很高 开发时限制较多 最后导致的结果是用了还不如不用 <!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"> <title>全局 CSS 样式</title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <style> body{ padding-top: 50px; } .demo{ text-align: center; background-color: red; } .red_text{ color: blue; } .col-red:nth-child(2n){ background-color: red; } .col-red:nth-child(2n + 1){ background-color: blue; } section{ height: 100px; background-color: yellow; /*margin: 0 auto; 居中无效 因为栅格系统是浮动的*/ } .blue-div{ background-color: blue; } .blue-div div:nth-child(2n){ background-color: yellow; } .blue-div div:nth-child(2n + 1){ background-color: red; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <!--container固定宽度--> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> <!--data-toggle toggle 开关--> <!--data-target 打开的目标 目标是id作为navbar的标签 开关操作是collapse--> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">智游教育</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">首页</a></li> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> </ul> </div> </div> </nav> <div class="container"> <div class="demo" data-toggle="red_text" data-target="h1"> <h1>BootStrap基本页面</h1> <p>这个页面包含相对完整的导航功能,能适应从大到小各种屏幕尺寸</p> </div> </div> <div class="container"> <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 col-red">col-1</div> <div class="col-lg-1 col-md-2 col-sm-3

2017-05-25 23:16:53 221 1 0
阅读详情
  • 1
前往