BootStrap学习(二)——重写首页之topbar

【BootStrap学习(二)——重写首页之topbar】的更多相关文章

BootStrap学习(二)——重写首页之topbar

1.布局容器帮助文档:http://v3.bootcss.com/css/#overview-container BootStrap需要为页面内容和栅栏系统包裹一个.container容器.提供的两个容器如下,注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套. 1).container类用于固定宽度并支持响应式布局的容器’ <div class="container"> ... </div> 2).container-fluid类用于 10…

BootStrap学习(三)——重写首页之导航栏和轮播图

1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激活状态,其表现为被按压下去(底色更深.边框颜色更深.向内投射阴影). 2.导航栏帮助文档:http://v3.bootcss.com/components/#navbar 反色导航条:http://v3.bootcss.com/components/#navbar-inverted 通过添加…

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果,并且元素…

bootstrap学习笔记<二>（标题，段落样式）

标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用class="h1"~class="h6"都可以实现h1~h6的标题效果.  <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <…

bootstrap学习（二）页面

响应式图片: //当图片大的时候,逐渐缩小浏览器大小,图片会显示为自适应大小 ,img-responsive <div class="container"> <div class="row"> <img src="../static/1.jpg" class="img-responsive" alt=""> </div> </div> 标题标签h…

前端框架——BootStrap学习

BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstrap.min.css,jquery.js,bootstrap.min.js文件解决兼容手机端代码,下面的代码中如果没有注意加上.  <meta name="viewport" content="width=device-width,…

python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

昨日内容回顾 ajax //get post 两种方式做请求 get 主要是获取数据 post 提交数据同一个路由地址既可以是get请求也可以是post请求一个路由对应一个函数 get请求 accept mime $.ajax({ url: 直接拼接到url http://www.baidu.com/s?wd=luffy&name=123, type:'get', //data是响应数据 success:function(data){ }, error:function(err){ c…

H5框架之Bootstrap（二）

H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续上一篇的已经把bootstrap了解个大概了,接下来我们就开始学习一下它里面的东西. 浏览器支持旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究我们不是在head里面引入了下面这些文件么 <!-- 新 Bootstra…

Bootstrap <基础二十九>面板（Panels）

Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的面板</title> <link href="/bootstrap/css…

Bootstrap <基础二十二>超大屏幕（Jumbotron）

Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: 创建一个带有 class .jumbotron. 的容器 <div>. 除了更大的 <h1>,字体粗细 font-weight 被减为 200px. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <tit…