BootStrap使用心得
1.什么是BootStrap？优点是什么？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
优点：BootStrap是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验。
Bootrastp的下载使用
下载地址： https://v3.bootcss.com/getting-started/#download
在html页面引入
<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap --> <link href="assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="assets/plugins/bootstrap/css/bootstrap-theme.min.css" type="text/css"rel="stylesheet"> <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="assets/plugins/jquery.min.js"></script> <!-- 包括所有已编译的插件 --> <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script> </body> </html>
Bootstrap网格系统
详见： https://v3.bootcss.com/css/
什么是网格系统？
简单来说网格系统就是可以让页面布局更简单，可以兼容移动端、PC端。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
Bootstrap 网格系统是如何工作的：
- 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
- 使用行来创建列的水平组。
- 内容应该放置在列内，且唯有列可以是行的直接子元素。
- 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
代码例子：
<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap --> <link href="assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="assets/plugins/bootstrap/css/bootstrap-theme.min.css" type="text/css"rel="stylesheet"> <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6" >左边</div> <div class="col-md-6" >右边</div> </div> </div> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="assets/plugins/jquery.min.js"></script> <!-- 包括所有已编译的插件 --> <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script> </body> </html>
媒体查询
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。
/* 超小设备（手机，小于 768px） /
/ Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { … }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { … }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { … }
我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { … }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }
@media (min-width: @screen-lg-min) { … }
媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：
让我们来看下面这行代码：
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap-theme.min.css" type="text/css"rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
@media screen and (max-width: 480px){
.my_div{
border: 1px solid yellow;
}
}
</style>
</head>
<body>
<!--当屏幕宽度小于或等于480px时候,div的边框变成黄色-->
<div class="my_div">
Hello 媒体查询
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="assets/plugins/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
bootstrap表格
详见 https://www.runoob.com/bootstrap/bootstrap-tables.html
bootstrap字体
使用字体图标
如需使用图标，只需要简单地使用下面的代码即可：
<span class="glyphicon glyphicon-search"></span>
即通过css样式引入字体样式
其它字体图标库
FontAwesome：http://fontawesome.dashgame.com/
LineAwesome：https://icons8.com/line-awesome
SocialIcons：http://www.socicon.com/chart.php
阿里巴巴矢量图标库：http://www.iconfont.cn/
- bootstrap使用心得总结
- bootstrap的datepicker控件使用心得
- 对jqueryValidate的使用心得 这个例子和bootstrap联合用的
- bootstrap的datepicker控件使用心得
- 浅析BootStrap中Modal（模态框）使用心得
- Bootstrap使用心得
- 关于使用bootstrap创建导航栏的一些学习心得（dropdown二级菜单）
- BootStrap的Datepicker控件使用心得分享
- Bootstrap Table使用心得总结
- bootstrap的datepicker、datetimepicker和jquery的datepicker使用心得
- Bootstrap table使用心得---thead与td无法对齐的问题
- 使用Orachard与Bootstrap建站心得
- Bootstrap Table使用心得总结
- 关于BootStrap中Modal（模态框）使用心得
- Bootstrap fileinput 使用心得
- bootstrap中modal使用心得
- Bootstrap使用心得
- bootstrap 使用心得
- bootstrap使用心得
- bootstrap-datepicker日历控件的使用心得