有什么方法可以在 Bootstrap 中添加断点? [英] Any way to add a breakpoint in Bootstrap?
问题描述
有什么办法可以将第 5 个断点添加到已经存在的 4 个断点上吗?不幸的是，对于我们目前正在进行的项目来说，4 是不够的.这个想法是创建一个新的断点屏幕-高清，超过 1400 像素.有没有简单的方法?
我认为抓住 less
a> bootstrap 文件，然后按照您需要的方式生成新的 CSS.第一种方法是使用 variables.less 文件，该文件通常包含您需要的所有内容.
对于您需要自定义的内容，有很多变量，例如，您可以通过更改变量 grid-columns 来更改列数，也可以更改断点.
//== 媒体查询断点////## 定义布局将改变的断点，以适应不同的屏幕尺寸.//超小屏幕/手机//** 从 v3.0.1 开始弃用 `@screen-xs`@screen-xs: 480px;//** 从 v3.2.0 开始弃用 `@screen-xs-min`@screen-xs-min: @screen-xs;//** 从 v3.0.1 开始弃用 `@screen-phone`@screen-phone: @screen-xs-min;//小屏幕/平板电脑//** 从 v3.0.1 开始弃用 `@screen-sm`@screen-sm: 768px;@screen-sm-min: @screen-sm;//** 从 v3.0.1 开始弃用 `@screen-tablet`@screen-tablet: @screen-sm-min;//中屏/桌面//** 从 v3.0.1 开始弃用 `@screen-md`@screen-md: 992px;@screen-md-min: @screen-md;//** 从 v3.0.1 开始弃用 `@screen-desktop`@screen-desktop: @screen-md-min;//大屏幕/宽桌面//** 从 v3.0.1 开始弃用 `@screen-lg`@screen-lg: 1200px;@screen-lg-min: @screen-lg;//** 从 v3.0.1 开始弃用 `@screen-lg-desktop`@screen-lg-desktop:@screen-lg-min；//所以媒体查询在需要时不会重叠，提供一个最大值@screen-xs-max: (@screen-sm-min - 1);@screen-sm-max: (@screen-md-min - 1);@screen-md-max: (@screen-lg-min - 1);//== 网格系统////## 定义您的自定义响应式网格.//** 网格中的列数.@网格列:12；//** 列之间的填充.左右分成两半.@grid-gutter-width: 30px;//导航栏折叠//** 导航栏未折叠的点.@grid-float-breakpoint: @screen-sm-min;//** 导航栏开始折叠的点.@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);https://github.com/twbs/bootstrap/blob/master/less/variables.less#L281-L332
熟悉 CSS 预处理器作为 less 和 sass，这些天它们正在成为一种标准.
另见 Twitter Bootstrap 自定义最佳实践 [关闭]
祝你好运！
Is there any way to add a 5th breakpont to 4 that already exist? Unfortunaetly, 4 is not enough for a project we currenty work on. the idea was to create a new break point screen-hd, which is more than 1400px. Is there easy way to do it?
I think it's a good practice to grab the less files of bootstrap and just produce a new CSS in the way you need. The first approach is to use variables.less file, that file contains usually all that you need.
For what you need to customize there are many variables, for example you can change the number of columns altering the variable grid-columns and also change the breakpoints.
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;
// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
https://github.com/twbs/bootstrap/blob/master/less/variables.less#L281-L332
It's also good to get familiar with CSS preprocessors as less and sass, they are becoming a standard these days.
See also Twitter Bootstrap Customization Best Practices [closed]
Good luck!
这篇关于有什么方法可以在 Bootstrap 中添加断点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
