随笔分类 -  bootstrap

bootstrap 滚动监听 标签页 和 工具提示
摘要：标签 <div class="container"> <h4>Tabs</h4> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">home</a></li> <li>< 阅读全文
posted @ 2017-03-03 11:22 letitia_blog 阅读(565) 评论(0) 推荐(0)
bootstrap警告框、进度条和列表组
摘要：警告框 <div class="container"> <div class="alert alert-success" role="alert"> 你好，喵星人！ </div> <div class="alert alert-danger" role="alert"> 你好，喵星人！ </div> 阅读全文
posted @ 2017-03-03 11:22 letitia_blog 阅读(442) 评论(0) 推荐(0)
bootstrap基本组件
摘要：bootstrap分页 <nav> <ul class="pagination"> <li><a href="#">&laquo;</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3< 阅读全文
posted @ 2017-03-03 11:22 letitia_blog 阅读(137) 评论(0) 推荐(0)
bootstrop媒体对象、面板和Well
摘要：媒体对象 <div class="media"> <div class="media-left"> <a href="#"> <img src="imgs/meinv.jpg" class="media-object" width="200" height="200"> </a> </div> <d 阅读全文
posted @ 2017-03-03 11:21 letitia_blog 阅读(223) 评论(0) 推荐(0)
bootstrap输入框组、导航和导航条
摘要：输入框组（input groups） 避免使用select 支持不好，使用输入框组 尺寸根据 input-group-lg input-group-sm来选择 <div class="container"> <div class="input-group input-group-lg"> <span 阅读全文
posted @ 2017-03-03 11:18 letitia_blog 阅读(277) 评论(0) 推荐(0)
bootstrap CSS表单、按钮和字体图标
摘要：基础表单 <form role="form"> <div class="form-group"> <label>email</label> <input type="email" class="form-control" placeholder="user"> </div> </form> <for 阅读全文
posted @ 2017-03-03 11:17 letitia_blog 阅读(1147) 评论(0) 推荐(0)
8.bootstrap下拉菜单、按钮组、按钮式下拉菜单
摘要：下拉菜单 dropdown 对齐方式： .dropdown-menu-right .dropdown-menu-left <div class="container"> <div class="dropdown"> 默认向下，向上的设置为 .dropup <button class="btn btn 阅读全文
posted @ 2017-03-03 11:13 letitia_blog 阅读(352) 评论(0) 推荐(0)
7.辅助类
摘要：情景文本颜色 <p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warni 阅读全文
posted @ 2017-03-03 11:11 letitia_blog 阅读(114) 评论(0) 推荐(0)
6.按钮 , 图片
摘要：bootstrap的按钮 1.<a class="btn btn-default" href="#" role="button">link</a> (使用a元素做按钮的时候，必须设置role="button") 2.<button class="btn btn-default" type="subm 阅读全文
posted @ 2017-03-03 11:10 letitia_blog 阅读(119) 评论(0) 推荐(0)
5.表单
摘要：1.基本表单实例 .form-control类的<input> <textarea> <select>元素等都被默认设置宽度属性为width:100% .form-group{ margin-bottom : 15px; } <form> <div class="form-group"> <labe 阅读全文
posted @ 2017-03-03 11:09 letitia_blog 阅读(124) 评论(0) 推荐(0)
4.代码、表格
摘要：代码 <div class="container"> <!--代码标签 <code>--> <p><code>&lt;section&gt;</code>是h5的一个新的标签</p> <!--用户输入 <kbd>--> <p>想现在输入<kbd>cmd</kbd>命令</p> <!--代码块 <pr 阅读全文
posted @ 2017-03-03 11:06 letitia_blog 阅读(143) 评论(0) 推荐(0)
3.排版
摘要：1.标题 <h1>到<h6> 还有.h1类到.h6类 给内联属性的文本赋予标题的样式 标题内添加<small>标签或赋予.small类元素，标记副标题 <h1>这是一个标题，<small>副标题</samll></h1> 2.页面主题 <p> bootstrap将全局font-size设置为14px 阅读全文
posted @ 2017-03-03 11:04 letitia_blog 阅读(106) 评论(0) 推荐(0)
2.媒体查询
摘要：@media (max-width:767px) { 超小屏幕，手机设备 } @media (min-width:768px) and (max-width:991px) { 小屏幕设备，平板 } @media (min-width:992px) and (max-width:1199px) { 中 阅读全文
posted @ 2017-03-03 11:03 letitia_blog 阅读(156) 评论(0) 推荐(0)
1.布局容器
摘要：.container .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { wid 阅读全文
posted @ 2017-03-03 11:01 letitia_blog 阅读(119) 评论(0) 推荐(0)
bootstrap框架栅格系统使用
摘要：使用的前端框架 bootstrap框架 Bootstrap是一个响应式的框架 我们在使用的时候主要使用的是它的网格系统， 1.bootstrap布局 布局容器：.container（用于固定宽度并支持响应式布局的容器） .container-fluid（用于100%宽度，占据全部视口的容器） @me 阅读全文
posted @ 2017-03-02 20:50 letitia_blog 阅读(205) 评论(0) 推荐(0)
bootstrap不同屏幕区分数值
摘要：@media (min-width:1200px){ } @media (min-width:992px) and (max-width:1199px){ } @media (min-width:768px) and (max-width:991px){ } @media (max-width:76 阅读全文
posted @ 2017-03-02 20:00 letitia_blog 阅读(523) 评论(0) 推荐(0)