码迷,mamicode.com
首页 > 其他好文 > 详细

响应式布局 Bootstrap(01)

时间:2016-11-25 09:37:31      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:表单   ges   lint   tco   使用   查询   jquer   发音   twitter   

1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷    

    Bootstrap 插件全部依赖 jQuery

<!DOCTYPE html>
<html lang="zh-cn">  //lang属性指定当前页面所用的自然语言 注意是为浏览器自动翻译提供基础功能 屏幕阅读软件的基础发音
  <head>
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  //为小IE存在 跨IE浏览器兼容性级别 启动内核
    <meta name="viewport" content="width=device-width, initial-scale=1">// 重点 (view )视口的概念  
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> //让老IE兼容H5新标签
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>//让老IE支持媒体查询
  </head>
  <body>
    <h1>你好,世界!</h1>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> //这个不多说 jq
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

官网抓来的模板  注释补上,另外为了方便使用bootlint 需要copy一段启动代码,见boot中文网  技术分享

2.css类

全局css

按钮
.btn block
.btn-default
.btn
.btn-color(   5种基础颜色) .btn-lg/sm/xs
(关于size的class)
图片 .img-circle .img-thumbnail img-responsive .img-round

精彩继续:

列表 .list-unstyle .list-online    
文字排版 .textcolor
5种基础颜色
.bgcolor
5种基础颜色
.text-uppercase 大写 
.text-lowercase 小写
.text-capitalize 首字母大
.text-left  对齐方式
.text-right
.text-center
.text-justify
辅助类 .hidden[-lg][-md][-sm][-xs] .pull-left/right
左右浮动
.clearfix  清除浮动
.caret 三角箭头
.close 关闭按钮
.table
.tabke-bordered
.table-striped
.table-hover
.table-response
表单 默认表单 水平表单 行内  
         
         

响应式布局 Bootstrap(01)

标签:表单   ges   lint   tco   使用   查询   jquer   发音   twitter   

原文地址:http://www.cnblogs.com/godbutton/p/6100304.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!