Bootstrap的注意事项

  1. 一定要把行和列包裹在.container中，如果不包裹，行会占据整个body，而container是固定宽度1170px.
  2. Bootstrap是基于border-box为盒模型基准尺寸，即box-sizing属性为border-box，意思是为元素指定的宽和高等于内容+内边距+边框的大小（房屋面积含墙体），所以增加内边距会使内容尺寸变小。
  3. 在每一行中最多可以指定12列，指定的列越多，每一列所分得的列宽也越小，当列宽不足以盛下元素时，溢出部分会被隐藏，这提示我们overflow属性设置为hidden。所以当你设置col-lg-3时，意味着你可以在这一行下写4个这样宽度的列，你若多写一个会自动换行。
  4. 若要做成响应式的网页，千万不要让你的块级元素有固定的较大宽度，或者元素的内外边距有固定的较大宽度，否则在移动设备上会有页边出现，或者有元素溢出。哪怕是margin-left:50%这样的都要小心用，因为你使用这条语句的目标元素自身的宽度很可能会在小屏幕上超过50%的屏幕像素，除非该元素本身也是响应式的。
  5. 负的外边距在右或下时，对独立的元素而言，周围会产生一个磁场，一右边或下边有元素，就会被吸进这个黑洞（减掉相应的外边距）；负的外边距在左或上时，会使元素左移或上移相应外边距的距离。
时间： 2024-07-30 02:02:59

Bootstrap的注意事项的相关文章

bootstrap 引用注意事项

2014年6月8日 13:35:31 bootstrap 提供了cdn服务,在引用css,js的时候注意先后顺序,firebug就不会报错 <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js">

快速学习bootstrap前台框架

W3c里的解释 使用bootstrap需要注意事项 1.  在html文件第一行要加上<!doctype html>[s1] 2.  导入bootstrap.min.css文件 3.  导入jquery.js[s2] 与bootstrap.js[s3] 快速学习 1.  登陆http://www.w3cschool.cc/bootstrap 2.  查看里面解说 3.  通过以下实例了解如何学习w3c的bootstrap.(一个警告框的实例) <!DOCTYPE html> <

bootstrap注意事项（五）表单

1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列. <!DOCTYPE HTML><html><head> <link rel="stylesheet" hr

bootstrap注意事项（四）表格

1.基本实例 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线.这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来. <!DOCTYPE HTML><html><head> <link rel="stylesheet" href="/stylesh

bootstrap注意事项（八）一些辅助信息

1.三角符号 通过使用三角符号可以指示某个元素具有下拉菜单的功能.注意,向上弹出式菜单中的三角符号是反方向的. <!DOCTYPE HTML><html><head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> </head><body> <div class="bs-example" da

bootstrap注意事项（一）

1.移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一样了,Bootstrap 3 默认的 CSS 本身就对移动设备友好支持. Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备.这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备. 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在

bootstrap注意事项（六）按钮

1.预定义样式 使用下面列出的类可以快速创建一个带有预定义样式的按钮 <!DOCTYPE HTML><html><head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> </head><body> <!-- 标准的按钮 --><button type="button" class

bootstrap注意事项（七）图片

在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-radius:500px 来让整个图片变成圆形. .img-thumbnail:添加一些内边距(padding)和一个灰色的边框. <!DOCTYPE HTML><html><head> <link rel=&qu

bootstrap注意事项（二）

1.内联子标题 在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题. <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 内联子标题</title> <link href="/stylesheets/bootstrap.min.css" rel="stylesheet"> </head&