码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap3快速使用

时间:2018-03-07 00:57:26      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:tab   元素   lib   uri   pos   教程   file   info   bootstra   

在2017年8月下旬,Bootstrap团队发布了Bootstrap 4 alpha版,以下内容是使用Bootstrap3。

移动设备优先

自Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。

Bootstrap网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
技术分享图片

html模板

使用以下html模板快速使用Bootstrap3,注意若要使用Bootstrap的JavaScript插件,一定要先引入 jQuery.js,再引入bootstrap.js。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
 
      <!-- 注意:jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

Bootstrap风格

如下图所示,Bootstrap3如果不自己定制css,通常就是如下6个颜色的组件。

技术分享图片

类名包含 颜色
default 灰白
primary 深蓝
success 绿
info 天蓝
warning 橘红
danger 西瓜红

参考资料

Bootstrap 教程 _ 菜鸟教程 http://www.runoob.com/bootstrap/bootstrap-tutorial.html
Bootstrap 可视化布局系统 http://www.runoob.com/try/bootstrap/layoutit/
Bootstrap 可视化布局系统-旧 http://www.runoob.com/try/bootstrap/layoutit/index_old.html

Bootstrap3快速使用

标签:tab   元素   lib   uri   pos   教程   file   info   bootstra   

原文地址:https://www.cnblogs.com/gleamer/p/startbootstrap3.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!