bootstrap笔记第一天
来源:互联网 发布:.net网络高级编程 编辑:程序博客网 时间:2024/05/03 04:59
一、如何使用bootstrap
(1)、加载Bootstrap层叠样式表
代码如下:
<link href="css/bootstrap.min.css re="stylesheet">
(2)、加载jQuery库,且该库必须加载在bootstrap之前
代码如下:
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
(3)、加载bootstrap的核心
代码如下:
<script="cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
二、移动设备优先
Bootstrap 是移动设备优先的
为了确保适当的绘制和触屏缩放,需要在 <head>
之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no
可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
三、使用字体图标在v3.bootcss.com中找到字体图标,然后在HTML中定义span标签,使得标签的id=字体图标的名字即可
例:
<span class="glyphicon glyphicon-euro"></span>
<span class="glyphicon glyphicon-heart"></span>
四、按钮的样式
bootstarp提供了一组样式,使用方法如下
标准的定义方法如下:
<button type="button" class="btn btn-default btn-lg">default</button>
<button type="button" class="btn btn-primary btn-sm">primary</button>
<button type="button" class="btn btn-success btn-xs">success</button>
也可以这样定义:
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-link">link</button>
通过实例不难看出,其中btn-default、 btn-primary、btn-success等都是用来调节按钮的颜色的,而btn-lg、 btn-sm、btn-xs是用来调节按钮的大小的。
不光<button>可以这样修改按钮样式,<a>、<input>都可以修改按钮样式、还可以在样式中加入字体图标。
代码如下:
<input type="button" class="btn btn-success" value="input">
<a href="#" class="btn btn-warnin" role="button">a link</a>
<input type="submit" class="btn btn-danger" value="submit">
<button class="btn btn-info btn-lg"><span class="glyphicon glyphicon-heart"></span>info</button>
<button>的激活状态:
当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于<button>
元素,是通过 :active
状态实现的。对于 <a>
元素,是通过.active
类实现的。然而,你还可以将 .active
应用到 <button>
上(包含aria-pressed="true"
属性)),并通过编程的方式使其处于激活状态。
代码如下:
<button type="button" class="btn btn-primary btn-lg active">Primary button</button><button type="button" class="btn btn-default btn-lg active">Button</button>
- bootstrap笔记第一天
- 学习笔记 Bootstrap 第一天--UI框架
- bootstrap第一天
- 第一天:听课笔记
- 第一天笔记
- java 第一天笔记
- 老师笔记--第一天
- HTML第一天笔记
- oracle第一天笔记
- opencv 笔记第一天
- MFC第一天笔记
- Struts2 笔记第一天
- 安全卫士第一天笔记
- 黑马第一天笔记
- 第一天学习笔记
- 第一天学习笔记
- Java第一天笔记
- JAVASE笔记第一天
- 算法导论——动态规划之最长公共子序列(LCS)和最长回文子序列(LPS)
- PowerDesigner反向生成PDM和name与注释互换
- 数据库访问性能优化
- hibernate中one-to-one两种配置方式
- Spring quartz 任务调度(注解方式)
- bootstrap笔记第一天
- 快速排序
- HDU - 1233 还是畅通工程(最小生成树模板题)
- C语言去掉字符串前后空格,中间多余空格
- 国科:做一家有梦想的芯片企业 五年后年收入100亿---C114
- 2016华为机试题目:最大的凸多边形
- HIVE sql: ROW_NUMBER()
- Mysql常用语句小结
- 网上订学生票问题注意事项