bootstrap学习1
来源:互联网 发布:linux打包命令 tar 编辑:程序博客网 时间:2024/06/07 18:14
对于很多web开发人员,要想写出漂亮的网页一般来说需要耗费大量的时间和精力,而bootstrap正好为我们解决了这些问题,可以快速构建web页面,并且支持响应式布局。下面看看他是怎么用的:
1.bootstrap为我们提供了免费的CDN服务,所以可以直接用他来引入我们需要的js,和css文件,如下:
Bootstrap 提供了一些用于强调文本的类
1.bootstrap为我们提供了免费的CDN服务,所以可以直接用他来引入我们需要的js,和css文件,如下:
<!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件(一般不用引入) --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
注意jquery必须在bootstrap之前就引入,因为Bootstrap 的所有 JavaScript 插件都依赖 jQuery
下面看看官方给出的一个hello world的例子
<!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>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body></html>2.为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
nitial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。
Bootstrap 网格系统(Grid System)的工作原理
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:
- 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
- 使用行来创建列的水平组。
- 内容应该放置在列内,且唯有列可以是行的直接子元素。
- 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。
媒体查询
/* 超小设备(手机,小于 768px) *//* Bootstrap 中默认情况下没有媒体查询 *//* 小型设备(平板电脑,768px 起) */@media (min-width: @screen-sm-min) { ... }/* 中型设备(台式电脑,992px 起) */@media (min-width: @screen-md-min) { ... }/* 大型设备(大台式电脑,1200px 起) */@media (min-width: @screen-lg-min) { ... }
基本的网格结构
下面是 Bootstrap 网格的基本结构:
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div></div><div class="container">....</div>
- <div class="container">...</div> 元素被添加,确保居中和最大宽度。
- 一旦添加了容器,接下来您需要考虑以行为单位。添加 <div class="row">...</div>,并在行内添加列 <div class="col-md-6"></div>。
- 网格中的每一行是由 12 个单元组成的,您可以使用这些单元定义列的尺寸
Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,如下:
<h1>我是标题1 h1</h1><h2>我是标题2 h2</h2><h3>我是标题3 h3</h3><h4>我是标题4 h4</h4><h5>我是标题5 h5</h5><h6>我是标题6 h6</h6>
内联子标题
如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <small>,或者添加 .small class
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2><h3>我是标题3 h3. <small>我是副标题3 h3</small></h3><h4>我是标题4 h4. <small>我是副标题4 h4</small></h4><h5>我是标题5 h5. <small>我是副标题5 h5</small></h5><h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
引导主体副本
为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本
<h2>引导主体副本</h2><p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>
Bootstrap 提供了一些用于强调文本的类
<small>本行内容是在标签内</small><br><strong>本行内容是在标签内</strong><br><em>本行内容是在标签内,并呈现为斜体</em><br><p class="text-left">向左对齐文本</p><p class="text-center">居中对齐文本</p><p class="text-right">向右对齐文本</p><p class="text-muted">本行内容是减弱的</p><p class="text-primary">本行内容带有一个 warning class</p><p class="text-success">本行内容带有一个 success class</p><p class="text-info">本行内容带有一个 info class</p><p class="text-warning">本行内容带有一个 warning class</p><p class="text-danger">本行内容带有一个 danger class</p>
0 0
- bootstrap学习笔记1
- bootstrap学习1
- bootstrap学习[1]
- bootstrap 学习(1)
- BootStrap学习笔记-1
- bootstrap学习笔记1
- Bootstrap 学习(1)
- bootstrap学习(1)
- 学习笔记-bootstrap(1)
- Bootstrap学习--初识Bootstrap
- Bootstrap学习--初识Bootstrap
- bootstrap学习之路1
- BootStrap基础知识学习-No.1
- 学习bootstrap 总结(1)
- bootstrap学习笔记心得1
- BOOTSTRAP学习笔记(1)
- 【Bootstrap学习笔记1】基础
- bootstrap学习笔记心得1
- 设计模式模式类别篇
- python OS模块
- Linux内核协议栈的socket查找缓存路由机制
- 本地使用git进行版本控制
- 【BZOJ2127】happiness 最小割 自己YY出来的建图、
- bootstrap学习1
- 课程设计-李勋
- java基础(5)
- SQL 表结构修改
- LeetCode OJ 之 Word Break (断词)
- 实现多线程方式三种方式
- [leetcode 47] Permutations II
- VMware网络连接相关
- MAC下的反编译、反汇编和调试神器Hopper Disassembler